@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');


:root {
      ---green:#4CAF50;
      ---white: #ececec;
      ---black: #1b1b1b;
      ---dark: #343a40;
      --halloween: #09122C;
      ---dark-blue: #37546D;
      ---slime: #00cba9;
      --slime2: #007f73;
      ---red: #ff3b3f;
      ---Skywrapper: #009dff;
      ---Luh: #0dcaf0;
      ---gray: #e0e0e0;
      ---puti: #ffffff;
      --secondary: #4cc9f0;
      ---content: #505050;
      --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    
}

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Karla;
      border: 0;
      outline: 0;
}

::-webkit-scrollbar {
      width: 5px;
      background-color: var(---black);
}

::-webkit-scrollbar-thumb {
      background-color: var(---white);
      border-radius: 10px;
}

body,
html {
      font-size: 16px;
      font-family: Karla;
      height: 100%;
      color: var(---black);
      background-color: var(---puti);
      scroll-behavior: smooth;
      border: none;
      outline: none;
}

          /* Preloader Styles */
          .preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease-out;
        }

        .companyyy{
          position: absolute;
          font-size: medium;
          font-weight: 900;
          bottom:12vh ;
          letter-spacing: 2px;
        }

        .progress-bar {
            position: absolute;
            bottom: 8vh;
            width: 200px;
            height: 5px;
            background-color: #f3f3f3;
            border-radius: 5px;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            background-color: #3498db;
            width: 0%;
            transition: width 2s ease-in-out;
        }

        .fade-out {
            opacity: 0;
            pointer-events: none;
        }

        /* Device Container */
        .device-container {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        /* Laptop Icon */
        .laptop {
            width: 120px;
            height: 80px;
            background-color: #333;
            border-radius: 8px 8px 0 0;
            position: relative;
            margin-right: 40px;
            overflow: hidden;
            transform-origin: bottom center;
            animation: laptopPulse 2s infinite alternate;
        }

        .laptop:after {
            content: '';
            position: absolute;
            width: 140px;
            height: 10px;
            background-color: #555;
            bottom: -10px;
            left: -10px;
            border-radius: 0 0 6px 6px;
        }

        .laptop-screen {
            width: 100px;
            height: 64px;
            background-color: #3498db;
            margin: 8px auto;
            position: relative;
            overflow: hidden;
        }

        .laptop-scan {
            position: absolute;
            top: 0;
            left: -20px;
            width: 20px;
            height: 64px;
            background-color: rgba(255, 255, 255, 0.4);
            animation: scan 1.5s infinite;
        }

        /* Phone Icon */
        .phone {
            width: 50px;
            height: 90px;
            background-color: #333;
            border-radius: 8px;
            position: relative;
            overflow: hidden;
            animation: phonePulse 2s infinite alternate;
        }

        .phone-screen {
            width: 42px;
            height: 72px;
            background-color: #3498db;
            margin: 9px auto;
            position: relative;
            overflow: hidden;
        }

        .phone-button {
            width: 14px;
            height: 14px;
            background-color: #555;
            border-radius: 50%;
            position: absolute;
            bottom: -4px;
            left: 50%;
            transform: translateX(-50%);
        }

        .phone-scan {
            position: absolute;
            top: 0;
            left: -20px;
            width: 20px;
            height: 72px;
            background-color: rgba(255, 255, 255, 0.4);
            animation: scan 1.5s infinite;
            animation-delay: 0.5s;
        }

        @keyframes scan {
            0% { left: -20px; }
            100% { left: 100%; }
        }

        @keyframes laptopPulse {
            0% { transform: scale(1); }
            100% { transform: scale(1.05); }
        }

        @keyframes phonePulse {
            0% { transform: scale(1); }
            100% { transform: scale(1.05); }
        }

.container {
      /* border: 1px solid var(---Luh); */
      height: 100%;
      width: 100%;

}

/* global settings */
a {
      text-decoration: none;
      color: var(---puti);
}

a:hover {
      color: var(---green);
}

/* element style */

.flexed {
      display: flex;
}

.flexed.center {
      justify-content: center;
      align-items: center;
}

.flexed.space-between {
      /* x directions */
      justify-content: end;

      /* y direction */
      align-items: center;
}

/* Navbar styles are now defined inline in each page for consistency */
  
  .nav-links,
  .nav-links a {
      display: flex;
      gap: 40px;
      align-items: center;
      justify-content: center;
      font-size: 15px !important;
  }
  
  .nav-link {
      color: #ffffff !important;
      text-decoration: none;
      font-weight: 500;
      font-size: 15px;
      padding: 8px 15px;
      transition: all 0.3s ease;
      border-radius: 5px;
  }
  
  .nav-link:hover {
      color: #4cc9f0 !important;
      background: rgba(255, 255, 255, 0.1);
  }
  
  .nav-links a {
      color: var(---puti);
      text-decoration: none;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 5px 0;
      position: relative;
      transition: color 0.3s ease;
  }
  
  .nav-links a:hover {
      color: var(---puti);
  }
  
  .nav-links a::after {
      position: absolute;
      width: 0;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: var(--secondary);
      transition: width 0.3s ease;
  }
  
  .nav-links a:hover::after {
      width: 100%;
  }
  
  /* Dropdown styles */
  .dropdown {
      position: relative;
      display: inline-block;
      height: 50px;
      display: flex;
      align-items: center;
    
  }
  
  .dropdown-btn {
      color: var(---puti);
      text-decoration: none;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 10px 15px;
      position: relative;
      transition: all 0.3s ease;
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
  }
  
  /* .dropdown-btn:hover {
      color: var(--secondary);
  }
   */

  .dropdown-btn::after {
      position: absolute;
      width: 0;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: var(---green);
      transition: width 0.3s ease;
  }
  
  .dropdown-btn:hover::after {
      width: 100%;
  }
  
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: white;
      min-width: 180px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
      z-index: 1;
      top: 40px;
      left: 0;
      border-radius: 4px;
      overflow: hidden;
  }
  
  .dropdown-content a,
  .dropdown-link {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 13px;
    width: 100%;
    font-size: 10px;
    font-weight: 600;
  }
  
  .dropdown-content a::after {
      display: none;
  }
  
.dropdown-content a:hover,
  .dropdown-link:hover {
     background: #076fab;
     background: linear-gradient(280deg, rgba(7, 111, 171, 0.8) 44%, rgba(148, 197, 235, 0.8) 100%);
  }
  
  .dropdown:hover .dropdown-content {
      display: block;
  }
  
  /* Arrow indicator */
  .dropdown-arrow {
      font-size: 10px;
      margin-left: 4px;
      transition: transform 0.3s ease;
  }
  
  .dropdown:hover .dropdown-arrow {
      transform: rotate(180deg);
  }
  
  /* Portal button */
  .portal-btn {
    background-color: var(---green);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: smaller;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease;
    letter-spacing: 0.5px;
    letter-spacing: 2px;
  }
  
  .portal-btn:hover {
      background-color:var(--secondary) ;
  }
  
  /* Mobile menu button */
  .menu-btn {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 20px;
  }
  
 .logo {
      width: auto;
      height: auto;
      margin-top: 1vh;
      left:1pc;
      max-width: 100%;
      position: absolute;
      z-index: 1;
  
      
}

.logo img {
      height: 27px;
      width: 100%;
      object-fit: contain;
      
}

.logo2 {
      width: auto;
      height: auto;
      max-width: 100%;
      z-index: 1;
   
      
}

.logo2 img {
      height: 50px;
      width: auto;
      object-fit: contain;
      
}

/* ==================================== */

.content.intro-content .page-content {
      position: relative;
      width: 100%;
      height: 100%;
      color: var(---white);
      z-index: 1;
}

.content.intro-content .page-content .content-text {

      justify-content: start;
      margin-left: 50px;
      margin-right: 50px;
      width: 100%;
      height: 60%;
      /* border: 1px solid var(---white); */
}

.content.intro-content .page-content .content-text .content-text-side {
      width: 80%;
      height: 100%;
      font-size: x-large;
      line-height: 1.6;
      display: flex;
      align-items: center;
      justify-content: left;
      text-align: left;
      padding-left: 20vh;
      /* border: 1px solid var(---red); */


}

/* #border{
      -webkit-text-stroke: 1pt black;

} */
.content.intro-content .page-content .content-text .content-text-side .Mt {
      font-size: 5rem;
      font-weight: bolder;
      line-height: 1;
      letter-spacing: 2px;
}


/* ================================================ */
.content.intro-content .page-content .content-text .content-text-side.side2 {
      align-items: end;
      text-align: right;
      justify-content: end;

}


.content.intro-content .page-content .content-text .content-text-side .fade-text{
      font-size: normal;
      font-weight: 300;
      width: 95%;
}

.content .contact-side {
      position: relative;
      width: 50%;

}


.content .contact-side .contact-header {
      padding: 10px;
      display: flex;
      flex-direction: column;
      color: var(---puti);
}

.content .contact-side .contact-header #lf{
      margin-left: 20px;
      color: var(---puti);
}

#lf::after{
      position: absolute;
      left: 4.5vw;
      bottom: 151vh;
      width: 50px;
      height: 3px;
      background: linear-gradient(to right, var(---dark-blue), var(--secondary));
}

#patner::after{
      position: absolute;
      left: 21.5vw;
      bottom: 151vh;
      width: 100px;
      height: 3px;
      background: linear-gradient(to right, var(---dark-blue), var(--secondary));
}


.content .contact-side .contact-header #contact {
      margin-bottom: 5px;
      letter-spacing: 2px;
      margin-top: 30px;
      font-size: x-large;
}



.line {
      width: 95%;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: start;
      transition: color 0.5s ease;
      /* border: 1px solid var(---red); */
      margin-left: 20px;
      line-height: 1.6;
      color: var(---puti);
}


.line i {
      font-size: 1.3rem;
      margin-right: 20px;
      /* border: 1px solid var(---black); */
}

.line:hover {
      color: var(--secondary)
}

.socials {
      margin: 10px;
      margin-left: 40px;
      margin-right: 20px;
      text-align: left;
      /* border: 1px solid var(---black); */
}

.socials h2{
      color: var(---puti);
}

.socials .social-links {
      display: flex;
      align-items: left;
      justify-content: left;
      margin-top: 20px
            /* border: 1px solid var(---black); */
}

.socials .social-links .link {
      border: 1px solid var(---puti);
      border-radius: 50%;
      padding: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(---puti);
      font-size: 2rem;
      margin: 5px;
      width: 50px;
      height: 50px;
      top: 0;
      position: relative;
      transition: background-color 0.5s ease;
      transition: top 0.5s ease;
}

.socials .social-links .soc:hover .link {
      background-color: var(--secondary);
      color: var(---puti);
      top: -10px;
}


.allInSolution {
      padding: 10px;
      margin-left: 20px;
      text-align: left;
      line-height: 1.5;
      color: var(---puti);
}


.allInSolution h1 {
      margin-bottom: 10px;
      text-align: left;
      font-size: x-large;
      color: var(---puti);
}

/* Section */
/* -------Slides1------ */

.section-intro{
      position: relative;
      height: 100vh;
      width: 100%;
      border: none !important;
      outline: none !important;
      margin: 0;
      padding: 0;
      overflow: hidden;
}

section {
      border: none !important;
      outline: none !important;
}

.slideshow-container1 {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      border: none;
      background-color: transparent;
      padding: 0;
      margin: 0;
      box-shadow: none;
    }
    
    .slides-wrapper1 {
      display: flex;
      transition: transform 0.8s ease;
      height: 100%;
      border: none;
      background-color: transparent;
      padding: 0;
      margin: 0;
      box-shadow: none;
    }
    
    .slide1 {
      min-width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      display: flex;
      align-items: center;
      border: none;
      box-shadow: none;
      outline: none;
      background-color: transparent;
      padding: 0;
      margin: 0;
    }

    #slide1{
      min-width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      position: relative;
      display: flex;
      align-items: start;
      padding-top: 27vh;
      border: none;
      outline: none;
      box-shadow: none;
    }

        #slide2{
      min-width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      position: relative;
      display: flex;
      align-items: start;
      padding-top: 24vh;
      border: none;
      outline: none;
      box-shadow: none;
    }


    
    #solo{
      position: relative;
      z-index: 2;
      color: white;
      width: 100%;
      padding: 0 6%;
      border: none;
      outline: none;
    }
    
    .slide-content1 {
      position: relative;
      z-index: 2;
      color: white;
      width: 100%;
      padding: 0 6%;
      align-self: flex-end;
      padding-bottom: 100px;
      border: none;
      background: transparent;
    }
    
    .navigation {
      position: absolute;
      bottom: 50px;
      left: 10%;
      z-index: 10;
      display: flex;
      align-items: center;
      border: none;
      outline: none;
      box-shadow: none;
    }
    
    .nav-dots {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: none;
      margin: 0 5px;
      cursor: pointer;
      transition: background-color 0.3s;
      outline: none;
      box-shadow: none;
      background-color: rgba(255, 255, 255, 0.5);
    }
    
    .nav-dots.active {
      background-color: white;
    }
    
    .menu {
      position: absolute;
      top: 30px;
      right: 30px;
      z-index: 10;
      display: flex;
      gap: 20px;
    }
    
    .menu-item {
      color: white;
      text-decoration: none;
      font-size: 14px;
      padding: 5px 0;
      position: relative;
    }
    
    .menu-item::after {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background-color: white;
      transition: width 0.3s;
      border: none;
      outline: none;
    }
    
    .menu-item:hover::after {
      width: 100%;
    }
    
    .menu-item {
      border: none;
      outline: none;
    }

    #quotesss{
       font-size: 38px;
      margin-bottom: 10px;
      font-weight: 700;
      letter-spacing:normal;
      justify-self: center;
      border: none;
      outline: none;
    }
    
    .slide-h1 {
      font-size: 35px;
      margin-bottom: 10px;
      font-weight: 700;
      letter-spacing:normal;
      justify-self: flex-start;
      border: none;
      outline: none;
    }
    
    .slide-h2 {
      font-size: 55px;
      font-weight: 600;
      line-height: 1.1;
      max-width: 600px;
      justify-self: flex-start;
      border: none;
      outline: none;
    }
    
    .slide-subtitle {
      font-size: 18px;
      color: #ffffff;
      margin-top: 15px;
      margin-bottom: 30px;
      font-weight: 300;
      letter-spacing: 1px;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
      border: none;
      outline: none;
    }
    
    .slide-moderntech {
    font-size: 5pc;
    margin-bottom: 30px;
    font-weight: 900;
    letter-spacing: 4px;
    line-height: 0.3;
    justify-self: center;
    padding-top: 90px;
    border: none;
    outline: none;
    }

/* -------------------- */
.section-summary {
      display: flex;
      justify-content: center;
      background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
      position: relative;
      min-height: 100vh;
      width: 100%;
      border: none;
      outline: none;
      padding: 3rem 1rem;
      box-shadow: var(--shadow);
    }
    
    .contain-sum {
      line-height: 1.7;
      text-align: justify;
      width: 90%;
      max-width: 1200px;
      background-color: white;
      padding: 2.5rem;
      border-radius: 12px;
      box-shadow: var(--shadow);
      border: none;
      outline: none;
    }
    
    .content-introo h1 {
      font-size: xx-large;
      text-align: center;
      margin-bottom: 1.5rem;
      color: var(---dark-blue);
      position: relative;
      padding-bottom: 1rem;
      border: none;
      outline: none;
    }
    
    .content-introo h1::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 3px;
      background: linear-gradient(to right, var(---dark-blue), var(--secondary));
      border-radius: 2px;
      border: none;
      outline: none;
    }
    
    .contain-sum .content-introo p {
      text-indent: 2rem;
      margin-bottom: 1rem;
      color: #505050;
      font-size: medium;
      border: none;
      outline: none;
    }
    
    .contain-sum .content-introo strong {
      color: var(---dark-blue);
      font-weight: 600;
      border: none;
      outline: none;
    }
    
    .service-highlight {
      margin: 2rem 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 1.5rem;
      border: none;
      outline: none;
    }
    
    .service-card {
      flex: 1 1 300px;
      background-color: rgba(76, 201, 240, 0.05);
      padding: 1.5rem;
      border-radius: 0 8px 8px 0;
      transition: all 0.3s ease;
      border: none;
      outline: none;
    }
    
    .service-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow);
      border: none;
      outline: none;
    }
    
    .service-card h3 {
      color: var(---dark-blue);
      margin-bottom: 0.75rem;
      border: none;
      outline: none;
    }
    
    .service-card p {
      color: #606060;
      font-size: medium;
      border: none;
      outline: none;
    }
    

/* ===================== */

.section-acceptance{
    display: flex;
    justify-content: center;
    background-image: linear-gradient(to top, #006edf, #2c82e7, #4996ee, #64a9f4, #80bcf9, #8ac9f9, #99d5f9, #ace0f9, #b7e6f4, #c6ecf0, #d6f0ef, #e6f4f1);
    align-items: center;
    border: none;
    outline: none;
    position: relative;
    height: auto;
    width: 100%;
    padding: 20vh 50px 20vh;
}

.container-acceptance {
      width: 100%;
      max-width: 960px;
      text-align: center;
      border: none;
      outline: none;
    }
    
    .header {
      color: var(---dark-blue);
      font-size: 3em;
      margin-bottom: 2rem;
      font-weight: 800;
      border: none;
      outline: none;
    }
    
    .tabs {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-bottom: 2rem;
      border: none;
      outline: none;
    }
    
    .tab-btn {
      background: transparent;
      border: 1px solid var(---dark-blue);
      border-radius: 30px;
      padding: 12px 30px;
      font-size: medium;
      cursor: pointer;
      width: 230px;
      transition: all 0.3s ease;
      border: none;
      outline: none;
    }
    
    .tab-btn.active {
      background: var(---dark-blue);
      color: white;
      border: none;
      outline: none;
    }
    
    .payment-options {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      margin-bottom: 2rem;
      border: none;
      outline: none;
    }
    
    .payment-option {
      background: white;
      border-radius: 10px;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 120px;
      border: none;
      outline: none;
      box-shadow: 0 4px 6px rgba(0,0,0,0.05);
      transition: transform 0.3s ease;
    }
    
    /* .payment-option:hover {
      transform: translateY(-5px);
    } */
    
    .payment-option img {
      max-width: 80%;
      max-height: 60px;
      object-fit: contain;
      border: none;
      outline: none;
    }
    
    .tab-content {
      display: none;
      border: none;
      outline: none;
    }
    
    .tab-content.active {
      display: block;
      border: none;
      outline: none;
    }
    

.section2 {
      display: flex;
      /* border: 1px solid rebeccapurple; */
      height: auto;
      width: 100%;
      position: relative;
      background-color: var(---puti);
      border: none;
      outline: none;
      justify-content: center;
      padding-top: 5vh;
      margin-bottom: 20vh;

}


.container-abt {
      width: 100%;
      max-width: 1200px;
      border: none;
      outline: none;
      margin: 0 auto;
      padding: 20px;
      line-height: 1.5;
  }
  
  header {
      text-align: center;
      padding: 30px 0;
      border: none;
      outline: none;
  }
  
  #us {
      color: var(---dark-blue);
      font-size: xx-large;
      margin-bottom: 20px;
      border: none;
      outline: none;
  }
  


  .hist{
    /* border: 1px solid rebeccapurple; */
    width: 50%;
    color:var(---dark-blue);
    text-align:center;
    justify-self: center;
    border: none;
    outline: none;
    margin-bottom: 30px;
    font-size: x-large;
  }
  
  .content3 {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      align-items: center;
      margin-bottom: 50px;
      border: none;
      outline: none;
  }
  

  .map-section {
      flex: 1;
      min-width: 300px;
      text-align: center;
      border: none;
      outline: none;
  }
  
  .map-container {
      position: relative;
      max-width: 500px;
      margin: 0 auto;
      border: none;
      outline: none;
  }
  

  .map-image {
      width: 100%;
      height: auto;
  }
  
  .info-section {
      flex: 1;
      min-width: 300px;
      color: var(---content);
  }
  
  .company-name {
      color: var(---dark-blue);
      font-weight: bold;
      margin-bottom: 10px;
  }
  
  .info-text {
      margin-bottom: 25px;
      text-align: justify;
  }

.sec-vis .contain-vis{
  display:flex;
  flex-direction: row;
  gap: 200px;
  justify-content: start;
  align-items: start;
 margin:10vh 0 10vh;
  background-color: var(---puti);
}

.child-vish img{
  display: flex;
  justify-self: center;
  height: 150px;
  width: 150px;
  margin-bottom: 20px;
  border-bottom: 5px solid var(---dark-blue);
  border-radius: 5px;
}


.child-vish p{
  color: var(---content);
  text-align: justify;
  width: 100%;
  margin-bottom: 100px;
}

.child-vish .vish{
  color: var(---dark-blue );
  text-align: center;
  font-size: x-large;
}

.child-miss img {
  display: flex;
  justify-self: center;
  height: 150px;
  width: 150px;
  margin-bottom: 20px;
  border-bottom: 5px solid var(---dark-blue);
  border-radius: 5px;
}

.child-miss p{
  color: var(---content);
  text-align: justify;
  width:100% ;
}

.child-miss .miss{
  color: var(---dark-blue);
  text-align: center;
  font-size: x-large;
}

.com-vid{
  width: 100%;
  /* border:1px solid rebeccapurple; */
  margin:0 0 20vh;
  background-color: var(---black);
}

.com-vid video{
 display: flex;
 justify-self: center;
 width: 80%;
 height: 100%;
}


.section3 {
      display: flex;
      /* border: 1px solid rebeccapurple; */
      height:fit-content;
      width: 100%;
      position: relative;
      justify-content: center;
      color: var(---puti);
      background-image: url(/Resources/img/Certificate/BGC.webp);
      background-size:cover;
      background-repeat: no-repeat;
      
}

.certificates img{
   background-color: rgb(255, 255, 255,0.6);
}

/* =======section4v1============= */
.section4v1 {
    display: flex;
    min-height: 130vh;
    width: 100%;
    position: relative;
   background-image: linear-gradient(to bottom, #076fab, #0078b1, #0081b6, #008abb, #0093c0);
    flex-direction: column;
    padding: 40px 20px;
    border-top: solid var(---white) 1px;

  }

  
  .section4v1 p {
    text-align: center;
    margin-bottom: 50px;
    font-size: x-large;
    color: var(---black);
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
  }

  #productivity1 {
      text-align: center;
    margin-bottom: 50px;
    font-size: x-large;
    color: var(---white);
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
  }
    #productivity {
      text-align: center;
    margin-bottom: 50px;
    font-size: x-large;
    color: var(---white);
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
  }
  

  
  .section4v1 .section-header {
      padding: 10px 0;
      font-size: 3em;
      width: 100%;
      text-align: center;
      color: #09122C !important;
      font-weight: 700;
      margin-top: 2vh;
  }

  #modal-ttx{
    font-size:30px;
  }
  
  .products-containerv1 {
      display: flex;
      justify-content: center;
      gap: 30px;
      flex-direction: row;
      width: 100%;
      flex-wrap: wrap;
      background-color:rgb(255, 255, 255,0.2);
      padding: 50px 10px;
      border-radius: 30px;
      box-sizing: border-box;
  }
  
  .section4v1 .products-containerv1 .products {
      height: 280px;
      width: 225px;
      position: relative;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: rgba(255, 255, 255, 1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.8);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
      transition: all 0.4s ease;
      padding: 30px 20px;
      overflow: hidden;
  }
  
  .section4v1 .products-containerv1 .products:hover {
      transform: translateY(-15px);
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(255, 255, 255, 1);
  }
  
  .section4v1 .products-containerv1 .products::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
      transform: rotate(45deg);
      z-index: 0;
      transition: all 0.6s ease;
      opacity: 0;
  }
  
  .section4v1 .products-containerv1 .products:hover::before {
      opacity: 1;
      transform: rotate(45deg) translateY(-30px);
  }
  
  .section4v1 .products-containerv1 .products img {
      height: 100px;
      width: 100px;
      object-fit: contain;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
      transition: all 0.5s ease;
      margin-bottom: 20px;
  }
  
  .section4v1 .products-containerv1 .products:hover img {
      transform: translateY(-10px) scale(1.1);
      filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.15));
  }
  
  .section4v1 .products-containerv1 .products .product-description {
      width: 100%;
      z-index: 1;
      transition: all 0.4s ease;
      
  }
  .section4v1 .products-containerv1 .products .product-description p{
    font-size: smaller;
  }
 .section4v1 .products-containerv1 .products .product-description button  {
      text-align: center;
      font-size: small;
      font-weight: 600;
      color: #09122C !important;
      margin: 0 0 10px 0;
      padding: 10px 18px;
      background: rgba(7, 111, 171, 0.10);
      border: 1px solid rgba(7, 111, 171, 0.22);
      border-radius: 999px;
      transition: all 0.3s ease;
  }

  .section4v1 .products-containerv1 .products .product-description a,
  .section4v1 .products-containerv1 .products .product-description h2  {
    text-align: center;
    font-size: small;
    font-weight: 600;
    color: #09122C !important;
    margin: 0 0 10px 0;
    transition: all 0.3s ease;
}
  
  .section4v1 .products-containerv1 .products:hover .product-description button {
      color:var(---white) !important;
      background: #076fab;
      border-color: #076fab;
      transform: translateY(-1px);
  }

  .section4v1 .products-containerv1 .products:hover .product-description h2 {
    color:#09122C !important;
}

  .product-description{
    /* border: 1px solid rebeccapurple; */
    display: grid;
    justify-content: center;
  }
  
  .section4v1 .products-containerv1 .products .product-description p {
      font-size: 14px;
      font-weight: 600;
      color: #3d4248;
      margin: 0 0 20px 0;
      line-height: 1.5;
      text-align: center;
      transition: all 0.3s ease;
      opacity: 0.85;
      
  }
  
  .section4v1 .products-containerv1 .products:hover .product-description p {
      opacity: 1;
  }
  
  .section4v1 .products-containerv1 .products .product-tags {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 15px;
  }
  
  .section4v1 .products-containerv1 .products .product-tags .tag {
      font-size: 0.7rem;
      padding: 4px 10px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.9);
      color: #5a67d8;
      transition: all 0.3s ease;
  }
  
  .section4v1 .products-containerv1 .products:hover .product-tags .tag {
      background: #5a67d8;
      border-color: #5a67d8;
      color: white;
      transform: scale(1.05);
  }
  
  .section4v1 .products-containerv1 .products .action-button {
      position: absolute;
      bottom: -40px;
      left: 50%;
      transform: translateX(-50%);
      padding: 10px 25px;
      background: #5a67d8;
      color: white;
      border: none;
      border-radius: 25px;
      font-size: 0.85rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.4s ease;
      opacity: 0;
      z-index: 2;
  }
  
  .section4v1 .products-containerv1 .products:hover .action-button {
      bottom: 25px;
      opacity: 1;
  }
  
  .section4v1 .products-containerv1 .products .action-button:hover {
      background: #4c51bf;
      transform: translateX(-50%) scale(1.05);
      box-shadow: 0 5px 15px rgba(90, 103, 216, 0.4);
  }
  
/* =============Hardware================ */

  .products-container {
      display: flex;
      justify-content: center;
      gap: 50px;
      flex-direction: row;
      width: 100%;
      flex-wrap: wrap;
      padding: 20px 0;
      padding-bottom: 90px;
  }
  
  .section4v1 .products-container .products {
    height: 270px;
    width: 240px;
    position: relative;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(10px);
    /* border: 1px solid rgba(255, 255, 255, 0.8); */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    padding: 30px 20px 20px 20px;
    overflow: hidden;
    background-color: rgba(240, 248, 255, 0.9);
  }
  
  .section4v1 .products-container .products:hover {
      transform: translateY(-15px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
      background: transparent;
  }
  
  .section4v1 .products-container .products::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
      transform: rotate(45deg);
      z-index: 0;
      transition: all 0.6s ease;
      opacity: 0;
  }
  
  .section4v1 .products-container .products:hover::before {
      opacity: 1;
      transform: rotate(45deg) translateY(-30px);
  }
  
  .section4v1 .products-container .products img {
      height: 120px;
      width: 120px;
      object-fit: contain;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
      transition: all 0.5s ease;
      margin-bottom: 15px;
  }
  
  .section4v1 .products-container .products:hover img {
      transform: translateY(-10px) scale(1.1);
      filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.15));
  }
  
  .section4v1 .products-container .products .product-description {
      width: 100%;
      z-index: 1;
      transition: all 0.4s ease;
      
  }
  .section4v1 .products-container .products .product-description p{
    font-size: smaller;
  }

  /* ===========MODAL============== */
.modall {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}
.modall-content {
    background-color: rgb(255, 255, 255,1);
    padding: 20px;
    border-radius: 30px;
    text-align: center;
    height: 400px;
    width: 1000px;
}

.close {
    cursor: pointer;
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.open-modall {
    margin: 10px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background: none;
    /* border-radius: 200px; */
}
.no-scroll {
  overflow: hidden;
  height: 100%;
}
  /* ======================== */
  
  .section4v1 .products-container .products .product-description button  {
    text-align: center;
    font-size: medium;
    font-weight: bolder;
    color: #09122C !important;
    margin: 0 0 10px 0;
    padding: 10px 18px;
    background: rgba(7, 111, 171, 0.10);
    border: 1px solid rgba(7, 111, 171, 0.22);
    border-radius: 999px;
    transition: all 0.3s ease;
  }

  .section4v1 .products-container .products .product-description a,
  .section4v1 .products-container .products .product-description h2  {
    text-align: center;
    font-size: small;
    font-weight: 600;
    color: #09122C !important;
    margin: 0 0 10px 0;
    transition: all 0.3s ease;
}

  .section4v1 .products-container .products:hover .product-description button {
      color:var(---white) !important;
      background: #076fab;
      border-color: #076fab;
      transform: translateY(-1px);
  }

  .section4v1 .products-container .products:hover .product-description h2 {
    color:#09122C !important;
}

  .product-description{
    /* border: 1px solid rebeccapurple; */
    display: grid;
    justify-content: center;
  }
  
  .section4v1 .products-container .products .product-description p {
      font-size: 0.875rem;
      color: #718096;
      margin: 0 0 20px 0;
      line-height: 1.5;
      text-align: center;
      transition: all 0.3s ease;
      opacity: 0.85;
      
  }
  
  .section4v1 .products-container .products:hover .product-description p {
      opacity: 1;
  }
  
  .section4v1 .products-container .products .product-tags {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 15px;
  }
  
  .section4v1 .products-container .products .product-tags .tag {
      font-size: 0.7rem;
      padding: 4px 10px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.9);
      color: #5a67d8;
      transition: all 0.3s ease;
  }
  
  .section4v1 .products-container .products:hover .product-tags .tag {
      background: #5a67d8;
      border-color: #5a67d8;
      color: white;
      transform: scale(1.05);
  }
  
  .section4v1 .products-container .products .action-button {
      position: absolute;
      bottom: -40px;
      left: 50%;
      transform: translateX(-50%);
      padding: 10px 25px;
      background: #5a67d8;
      color: white;
      border: none;
      border-radius: 25px;
      font-size: 0.85rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.4s ease;
      opacity: 0;
      z-index: 2;
  }
  
  .section4v1 .products-container .products:hover .action-button {
      bottom: 25px;
      opacity: 1;
  }
  
  .section4v1 .products-container .products .action-button:hover {
      background: #4c51bf;
      transform: translateX(-50%) scale(1.05);
      box-shadow: 0 5px 15px rgba(90, 103, 216, 0.4);
  }

  /* ============================================ */

/* Album */
  .section-album{
    /* border: 1px solid rebeccapurple; */
    background:url(/Resources/img/f1.jpg);
    width: 100%;
    height: auto;
    margin-top: 10vh;
   margin-bottom: 10vh;
   padding-bottom: 20vh;
   padding-top: 10vh;
}

.container1 {
  max-width: 1200px;
  margin: 0 auto;
}

header {
  text-align: center;
  margin-bottom: 20px;
  padding-top: 30px;
}

h1 {
  font-size: 3em;
  margin-bottom: 15px;
  color: var(---puti);
  font-weight: 900;
  letter-spacing: 3px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

header p {
  font-size: 1.2rem;
  color: var(---puti);
}

.search-container1 {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
  position: relative;
}

.search-box {
  padding: 15px 20px;
  border: none;
  border-radius: 50px;
  width: 500px;
  max-width: 90%;
  font-size: 1.1rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
}

.search-box:focus {
  outline: none;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  width: 550px;
  max-width: 95%;
}

.controls {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.view-options {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50px;
  padding: 5px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.view-options button {
  background: transparent;
  border: none;
  padding: 10px 20px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  color: #7f8c8d;
}

.view-options button:hover {
  color: #3498db;
}

.view-options button.active {
  background-color: #3498db;
  color: white;
  box-shadow: 0 3px 8px rgba(52, 152, 219, 0.3);
}

.photo-container1 {
  max-height: 70vh;
  overflow-y: auto;
  padding: 10px;
  border-radius: 10px;
  background:transparent;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Custom scrollbar */
.photo-container1::-webkit-scrollbar {
  width: 10px;
}

.photo-container1::-webkit-scrollbar-track {
  background: var(---white);
  border-radius: 10px;
}

.photo-container1::-webkit-scrollbar-thumb {
  background: rgba(52, 152, 219, 0.6);
  border-radius: 10px;
}

.photo-container1::-webkit-scrollbar-thumb:hover {
  background: rgba(52, 152, 219, 0.8);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.5s ease;
}

.no-results {
  text-align: center;
  padding: 50px 0;
  color: #7f8c8d;
  font-size: 1.2rem;
  display: none;
}

.photo-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  position: relative;
}

.photo-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.photo-img-container1 {
  height: 220px;
  overflow: hidden;
  position: relative;
}

.photo-img-container1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.photo-card:hover .photo-img-container1 img {
  transform: scale(1.1);
}

.photo-info {
  padding: 20px;
  position: relative;
}

.photo-date {
  position: absolute;
  top: -15px;
  right: 20px;
  background: #3498db;
  color: white;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.8rem;
  box-shadow: 0 3px 8px rgba(52, 152, 219, 0.3);
}

.photo-info h3 {
  margin-bottom: 10px;
  color: #2c3e50;
  font-size: 1.3rem;
}

.photo-info p {
  color: #7f8c8d;
  font-size: 0.95rem;
  line-height: 1.5;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal.fade-in {
  opacity: 1;
}

.modal-content {
  max-width: 90%;
  max-height: 90%;
  position: relative;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.modal.fade-in .modal-content {
  transform: scale(1);
}

.modal-content img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.close-btn {
  position: absolute;
  top: -50px;
  right: 0;
  font-size: 35px;
  color: white;
  cursor: pointer;
  background: none;
  border: none;
  transition: transform 0.3s ease;
}

.close-btn:hover {
  transform: rotate(90deg);
}

.image-info {
  color: white;
  padding: 20px 0;
  text-align: center;
}

.image-info h3 {
  margin-bottom: 10px;
  font-size: 1.5rem;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.image-info p {
  font-size: 1rem;
}

.welcome-message {
  text-align: center;
  padding: 50px 0;
  color: #34495e;
  display: none;
}

.list-view .photo-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.list-view .photo-card {
  display: flex;
  height: 180px;
}

.list-view .photo-img-container1 {
  width: 180px;
  height: 180px;
  flex-shrink: 0;
}

.list-view .photo-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}

.list-view .photo-date {
  top: 15px;
  right: 15px;
}

/* Animation for photo cards appearing */
@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.photo-card {
  animation: fadeInUp 0.5s ease forwards;
}

.photo-card:nth-child(2) {
  animation-delay: 0.1s;
}

.photo-card:nth-child(3) {
  animation-delay: 0.2s;
}

.photo-card:nth-child(4) {
  animation-delay: 0.3s;
}

.photo-card:nth-child(5) {
  animation-delay: 0.4s;
}

.photo-card:nth-child(6) {
  animation-delay: 0.5s;
}

.photo-card:nth-child(7) {
  animation-delay: 0.6s;
}

.photo-card:nth-child(8) {
  animation-delay: 0.7s;
}


/* ===== */

.section6{
      position: relative;
      background-color: var(---puti);
      height:fit-content;
      width: 100%;
      height: auto;
  
}

.container-S{
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 20px 20vh;
    }

    #bok {
      text-align: center;
      color: var(---dark-blue);
      font-size: 3em;
      margin-bottom: 10vh;
      margin-top: 15vh;
      font-weight: bolder;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
    }

    .service-cardd {
      background: url();
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
      height: 100%;
      display: flex;
      flex-direction: column;
      background-image: linear-gradient(135deg, rgba(173, 216, 230, 0.2) 0%, rgba(240, 248, 255, 0.4) 100%);
      
    }

    /* .service-cardd:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    } */

    .service-cardd::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="none" stroke="rgba(173, 216, 230, 0.5)" stroke-width="0.5"/><path d="M20,20 L80,20 M20,40 L80,40 M20,60 L80,60 M20,80 L80,80 M20,20 L20,80 M40,20 L40,80 M60,20 L60,80 M80,20 L80,80" stroke="rgba(173, 216, 230, 0.5)" stroke-width="0.5"/></svg>');
      opacity: 0.2;
      z-index: 0;
    }

    .service-contentt {
      padding: 25px;
      position: relative;
      z-index: 1;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      line-height: 1.5;
    }

    .service-title {
      color: #2c3e50;
      font-size: x-large;
      margin-bottom: 15px;
      font-weight: 600;
    }

    .service-description {
      color: #555;
      flex-grow: 1;
      font-size:large;
    }


.section6 .services-intro #ha { 
      text-align: center;
      font-size: medium;
      padding-left: 100px;
      padding-right: 100px;
      text-indent: 0.5in;
      
      
}

/* -----IT Services-------- */

.section7{
      position: relative;
      background-color: var(---puti);
      height:auto;
      width: 100%;
      margin-bottom: 50vh;
}

/* .section-contact{
  display: flex;
  justify-items: right;
      background: url(/Resources/img/contact.png);
      background-size:100%;
      position: relative;
      height: auto;
      width: 100%;

}

.contact-side{
      width: 100%;
      display: flex;
      flex-direction: column;
      padding-bottom: 80px;
      padding-top: 20px;
      
      
}

.contact-header #lf{
      margin-top: 30px;
      
}

.section-contact #details{
      color: var(---puti);
      text-align:left;
      margin:20px;
      line-height: 1.5;
      
}

.context{
  width: 80%;
} */
/* --------------Partnership-------------- */
   .spon{
    width: 100%;
    height: 107vh;
    padding: 0 5vh 25vh;
    background-image: linear-gradient(to left bottom, #076fab, #007db2, #008ab8, #0097bb, #00a4bd, #00a4bf, #00a5c1, #00a5c3, #0099c4, #028bc3, #2d7dbe, #476eb5);
   }
.containerr {
    max-width: 1200px;
    margin: 0px auto;
    padding: 0 20px;
    padding-top: 50px;
    }

    .carousel-container {
    position: relative;
    overflow: hidden;
    border-radius: 120px;
    background-color: rgb(255,255,255,1);
    }

    .carousel-header {
      text-align: center;
      padding-top:125px;
    }

    .carousel-category-header {
        font-size: 1.25rem;
        font-weight: bold;
        padding: 1rem 0;
        background: #f0f0f0;
        text-align: center;
        width: 100%;
}


    .carousel-header h1 {
      font-size: 3em;
      color: var(---white);
      font-weight: 600;
      position: relative;
      display: inline-block;
    }

    .carousel-header h1::after {
      content: '';
      position: absolute;
      width: 80%;
      height: 4px;
      background: linear-gradient(90deg, #00a609, #aacc2e);
      bottom: -10px;
      left: 10%;
      border-radius: 2px;
    }

    .carousel-track {
      display: flex;
      padding-top: 0;
      padding-bottom:0;
      transition: transform 0.5s ease-in-out;
      margin: 0 40px;
    }

    .carousel-slide {
      min-width: calc(100% / 3);
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s ease;
    }


    .partner-card {
      width: 100%;
      height: 120px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      border-radius: 8px;
      /* background: rgba(255, 255, 255, 1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); */
      transition: all 0.3s ease;
      overflow: hidden;
    }

    /* .partner-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    } */

    .partner-card img {
      max-width: 100%;
      max-height: 80px;
      object-fit: contain;
      filter: grayscale(30%);
      transition: all 0.3s ease;
    }

    /* .partner-card:hover img {
      filter: grayscale(0%);
      transform: scale(1.05);
    } */
    /* --------------------- */

.footer {
      background-color: #1376b8;
      padding: 60px 0 20px;
      position: relative;
      width: 100%;
  }

 
  
  .footer-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 40px;
  }

  
  .footer-logo {
      margin-bottom: 15px;
      padding-left: 11vh;
  }
  
  .footer-logo img {
      height: 50px;
      margin-bottom: 10px;
  }
  
  .footer-about {
      flex: 1;
      min-width: 250px;
  }
  
  .footer-about p {
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    line-height: 1.6;
  }
  
  .footer-links {
    flex: 1;
    min-width: 150px;
    font-size: 15px;
    font-weight: 500;
  }


  .footer-links h3 {
      position: relative;
      margin-bottom: 25px;
      font-size: 18px;
      font-weight: 600;
  }
  
  .footer-links h3::after {
      position: absolute;
      left: 0;
      bottom: -10px;
      width: 40px;
      height: 3px;
      background: var(--secondary);
      border-radius: 2px;
  }
  
  .footer-links ul {
      list-style: none;
  }
  
  .footer-links li {
      margin-bottom: 12px;
  }
  
  .footer-links a {
      color: var(---black);
      text-decoration: none;
      transition: all 0.3s ease;
      position: relative;
      padding-left: 15px;
  }
  
  .footer-links a:before {
      position: absolute;
      left: 0;
      color: var(--secondary);
  }
  
  .footer-links a:hover {
      color: var(--secondary);
      padding-left: 18px;
  }
  
  .footer-contact {
      flex: 1;
      min-width: 250px;
  }
  
  .contact-info a {
      font-size: 15px;
      margin-bottom: 20px;
      color: var(---black);
      font-weight: 500;
  }
  
  .contact-info i {
      margin-right: 10px;
      color: var(--secondary);
  }

  .contact-info a:hover{
    color: var(--secondary);
  }
  
  .social-links {
      display: flex;
      gap: 15px;
      margin-top: 25px;
  }
  
  .social-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: var(---puti);
      color: #fff;
      text-decoration: none;
      transition: all 0.3s ease;
  }
  
  .social-icon:hover {
      background-color: var(---white);
      transform: translateY(-3px);
  }
  
  .footer-bottom {
      margin-top: 40px;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      text-align: center;
      width: 100%;
  }
  
  .footer-bottom p {
      opacity: 0.6;
      font-size: 14px;
      color:var(---white);
  }
  
  .footer-bottom a {
    color: black;
    font-weight: 700;
    text-decoration: none;
  }
  
  /* Shape divider */
  .footer-divider {
      position: absolute;
      top: -50px;
      left: 0;
      width: 100%;
      height: 50px;
      overflow: hidden;
  }
  
  .footer-divider svg {
      position: absolute;
      width: 100%;
      height: 50px;
      fill: rgba(7, 111, 171, 0.6);
    
  }
  
  .fa-angle-right{
    color: var(--secondary);
  }
 


@keyframes scroll {
      from{
            opacity:0;
            scale: 0.4;
      }

      to{
            opacity:1;
            scale: 1;
      }

}

.fade-in {
      animation-name: fadeIn;
      animation-duration:5s;
      animation-timing-function: ease;
      animation-fill-mode: forwards;
      opacity: 0;
  }
  
  @keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
  }


.privacy-policy {
      height: 150vh;
      width: 100%;
      background-color: var(---puti);
      position: relative;
      overflow: hidden;

}


/* title */
.about {
      width: 85%;
      height: min-content;
      margin-bottom: 20px;
      /* border:1px solid var(---black); */
}

.fade-in {
      /* border: 1px solid var(---black); */
      width: 100%;
      text-align: justify;
      margin-bottom: 30px;
      line-height: 1.6;
      font-size: medium;
}

.fade-in #company{
      font-size: xx-large;
      margin-top: 70px;
      color: var(---dark-blue);
}

.fade-in p {
      /* border: 1px solid var(---black); */
      width: 90%;
      margin-left: 3%;
      text-align: center;
      margin-bottom: 30px;
      line-height: 1.6;
      font-size: medium;
      text-indent: 0%;
}



.about h1 {
      padding-bottom: 10px;
      margin-top: 50px;
      text-align: center;
      letter-spacing: 2px;
      font-size: x-large;
}

.about-sides {
      height: 350px;
      display: flex;
      /* justify-content: space-between; */
}


.about-sides .side.content  {
      width: 55%;
      text-align: justify;
      margin-bottom: 10px;
      line-height: 1.6;
      text-indent: 30px;
      /* border: 1px solid var(---black); */
}

.about-sides p{
      text-align: justify;
      color: var(---content);
}

.about-sides #techhh{
      color: var(---dark-blue);
}

.about-sides .side.content .about-content {
      padding: 20px;
      
}

.about-sides .side.image {
      width: 40%;
}

.about-sides .side.image img {
      width: 100%;
      height: 100%;
      object-fit: fill;
      /* border: 1px solid var(---black); */


}

.certificate {
      flex-direction: column;
      margin: 50px 10px 50px;


}

.certificates {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      padding: 10px;
      width: 100%;
      height: 100%;
      overflow-y: scroll;
}

.cont{
      display: flex;
      justify-content: center;
}

.certificate .content-header #quotes {
      display: flex;
      font-size: large;
      width: 70%;
      line-height: 1.5;
      /* border: 1px solid rebeccapurple; */
}


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

.certificates .cert {
      width: 300px;
      height: 200px;
      margin: 10px;
      position: relative;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      overflow: hidden;
      z-index: 1;
}

.certificates .cert img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: contain;
      z-index: 0;
}

.certificates .cert .cert-info {
      /* border: 1px solid var(---dark-blue); */
      width: 100%;
      height: 100%;
      display: none;
      align-items: end;
      z-index: 2;
      color: var(---white);
      padding: 10px;
      background: rgb(0, 29, 80);
      background: linear-gradient(0deg,
                  rgba(2, 0, 36, 1) 0%,
                  rgba(0, 18, 177, 0.704) 35%,
                  rgba(0, 85, 255, 0) 100%);
                
}

.certificates .cert .cert-info .info .title {
      font-weight: bold;
      letter-spacing: 2px;
      font-size: small;
      font-weight: bold;
}

.certificates .cert .cert-info .info p {
      font-size: x-small;
      padding-bottom: 10px;
      font-weight: bolder;
}

.certificates .cert:hover .cert-info {
      display: flex;
      top: 0px;
      position: relative;
}

.content-header {
      padding: 10px;
      text-align: center;


}

.content-header h1 {
      font-size: 3em;
      margin-bottom: 20px;
      letter-spacing: 2px;
}



.certificates .cert .cert-info .info {
      position: relative;
      top: 100px;
      transition: top 1s ease-in-out;
}

.certificates .cert .cert-info:hover .info {
      top: 0;
}



.services-allinsolution {
      padding: 20px;
      margin-bottom: 80px;
}

.services-allinsolution .solution {
      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
      border-radius: 10px;
      margin: 10px;
      padding: 20px;
}

.services-allinsolution .solution p {
      margin: 20px;
      line-height: 1.5;
      font-size: smaller;
}

.solution {
      background-image: url(https://img.freepik.com/free-vector/network-mesh-wire-digital-technology-background_1017-27428.jpg);
      background-size: cover;
}

.services-allinsolution .solution .h3 {
      margin: 20px;
      line-height: 1.5;
      font-size: medium;
      font-weight: bold;
      color: var(---content);

}

.services-allinsolution p{
      color: var(---content);
}


.intro #Main {
      line-height: 1.5;
      font-size: xx-large;
      letter-spacing: 2px;
      font-weight: bold;
      color: var(---dark-blue);

}


.services-intro h1 {
      padding-top: 20px;
      text-align: center;
}

/* ====== */

/* =====Hardware======= */
.wares {
      width: 100%;
      height: max-content;
      padding-top: 500px;
      flex-direction: column;
      font-size: small;
      font-weight: bold;
      /* border: 1px solid var(---Luh); */
}

.wares .ware-header {
      height: fit-content;
      width: 100%;
      margin-bottom: 30px;
      /* border: 1px solid var(---red); */
}

.wares-content {
      width: 100%;
      height: fit-content;
      flex-wrap: wrap;
      flex-grow: inherit;
      z-index: 1;
      /* border: 1px solid var(---black); */
}

.content .wares .wares-content .ware-item {
      /* border: 1px solid var(---dark); */
      width: 230px;
      height: 230px;
      overflow: hidden;
      display: block;
      position: static;
      margin: 15px;

}

.content .wares .wares-content .ware-item .image {
      width: 228px;
      height: 160px;
      object-fit: cover;
      /* border: 1px solid var(---red); */
      /* z-index: -1; */
      border-radius: 10%;
      filter: grayscale(0.7) blur(1pt);


}

.content .wares .wares-content .ware-item .image:hover {
      -ms-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
      filter: blur(0);

}

.content .wares .wares-content .ware-item p {
      text-align: center;
      padding-top: 130pt;

}


/* ========Software=========== */

.software {
      width: 100%;
      flex-direction: column;
      margin-top: 3in;

}

.software .software-header {
      height: fit-content;
      width: 100%;
      margin-top: 300px;
      margin-bottom: 30px;

}

.software-content {
      width: 100%;
      height: 100%;

}

.content .software .software-content .software-item {
      /* border: 1px solid var(---dark); */
      width: 250px;
      height: 200px;
      overflow: hidden;
      display: block;
      position: static;
      margin: 10px;


}

.content .software .software-content .software-item .image {
      width: 11%;
      height: auto;
      object-fit: fill;
      /* border: 1px solid var(---red); */
      margin-left: 3.4%;
      filter: brightness(1);

}


.service-img {
      height: 30%;
      width: 30%;
      display: flex;
      align-items: start;
      /* =========================== */

      .content {
            position: relative;
            max-width: 100%;
            overflow: hidden;
      }

      .myslides {
            display: none;
            width: 100%;
      }

      .myslides img {
            width: 100%;
            height: auto;

      }


      @keyframes fade {
            0% {
                  opacity: 0;
                  animation-timing-function: ease-in;
            }

            12.00% {
                  opacity: 1;
                  animation-timing-function: ease-out;
            }

            20.00% {
                  opacity: 1;
            }

            28.00% {
                  opacity: 0;
            }

            100% {
                  opacity: 0;
            }
      }
}

/* ==========Helpdesk_img====================== */

.services-helpdesk {
      display: flex;
      box-sizing: border-box;
      flex-direction: none;
      position: absolute;
      border: 1px groove var(---red);
      margin-top: 30px;
      height: 700px;
      width: 100%;
      justify-content: center;
      align-items: start;


}



/* ======================= */


.products124{
  display: flex;
  position: relative;
  height: 150vh;
  width: 100%;
  background-color: var(---puti);
}
/* scrolltop */
#scrollToTopBtn {
  display: none;
  position: fixed;
  bottom: 100px;
  right: 30px;
  background-color: rgba(0, 123,255, 0.8); /*Adding transparency*/
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 99;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s;
  scroll-behavior: smooth;
}

#scrollToTopBtn:hover {
  background-color: #0056b3;
}

/* ======================= */

        .containerx1 {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .cardx2-gridx1 {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 20px;
         background-image: linear-gradient(to bottom, #4582c1, #3d88c6, #338fca, #2995ce, #1c9bd1, #11a0d3, #06a6d4, #00abd5, #00b1d5, #00b7d3, #00bdd1, #00c2ce);
          padding: 50px 30px;
          border-radius: 30px;
        }
        
        .cardx2 {
          border-radius: 4px;
          background: rgb(255,255,255,0.3);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          padding: 20px;
          transition: transform 0.2s ease;
          height: 190px;
          border-radius: 20px;
        }
        
        .cardx2-title {
          font-size: larger;
          font-weight: bold;
          color:var(---dark-blue);
          margin-top: 0;
          margin-bottom: 10px;
          border-bottom: 1px solid #eee;
          padding-bottom: 10px;
        }
        
        .cardx2-content {
              font-size: large;
              color: rgb(52, 52, 52);
              line-height: 1.5;
        }
        
        #card-head {
            text-align: center;
            color:var(---dark-blue);
            margin-bottom: 30px;
        }

/* Merchant Docs design system layer */
:root {
      --md-blue-primary: #076fab;
      --md-blue-dark: #09122C;
      --md-blue-light: #4cc9f0;
      --md-blue-surface: #f4f8fc;
      --md-white: #ffffff;
      --md-content: #505050;
      --md-border: #dbe8f5;
      --md-shadow-sm: 0 2px 12px rgba(7, 111, 171, 0.08);
      --md-shadow-md: 0 12px 32px rgba(7, 111, 171, 0.14);
}

body,
html {
      background: var(--md-blue-surface);
}

.navbar {
      background: linear-gradient(280deg, rgba(7, 111, 171, 0.92) 44%, rgba(148, 197, 235, 0.92) 100%);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(10px);
      padding: 15px 0;
      height: 70px;
      box-sizing: border-box;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1000;
}

.navbar-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.nav-links a {
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 16px;
}

.portal-btn {
      background: #4CAF50;
      border-radius: 6px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      transition: transform 0.2s ease, background-color 0.2s ease;
}

.portal-btn:hover {
      background: var(--md-blue-light);
      transform: translateY(-1px);
}

.footer {
      background: #1376b8;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.footer-container,
.footer-inner {
      max-width: 1100px;
      margin-left: auto;
      margin-right: auto;
}

.footer-links a,
.footer-contact a {
      transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-contact a:hover {
      color: var(--md-blue-light);
}

.services-grid .service-cardd,
.cardx2,
.products,
.about-content,
.slide-content1 {
      border: none !important;
      box-shadow: none !important;
}

.slide-content1,
.slide-content1 *,
.slideshow-container1,
.slides-wrapper1,
.slide1 {
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
}

/* Add blur effect to slide backgrounds */
.slide1::before,
#slide1::before,
#slide2::before {
      content: '';
      position: absolute;
      inset: 0;
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      z-index: 1;
}

.services-grid .service-cardd:hover,
.cardx2:hover,
.products:hover {
      box-shadow: var(--md-shadow-md);
}

/* Enlarge footer MCSI logo */
.footer-logo img {
      height: 80px;
      width: auto;
      max-width: 200px;
}

:focus-visible {
      outline: 3px solid #4cc9f0;
      outline-offset: 3px;
}