/*--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
/* Reset Code */
/* General body styles */
body,html {
    padding: 0;
    margin: 0;
    background-image: url("../images/background.jpg");
    font-family: "Work Sans", sans-serif;
    height: 100%;
  }
  
  .bg {
    /* The image used */
    
  
    /* Full height */
    height: 100%;
  
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  /* Transitions for links and buttons */
  body a,
  body button {
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    text-decoration: none;
  }
  
  body a:hover,
  body button:hover {
    text-decoration: none;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
  }
  
  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }
  
  /* Reset and utility classes */
  h1, h2, h4, h5, h6, p, ul, ol, label {
    margin: 0;
    padding: 0;
  }
  
  a:focus,
  a:hover {
    text-decoration: none;
    outline: none;
  }
  
  .text-bl { color: #343a40; }
  .text-wh { color: #fff; }
  .text-li { color: #f8f9fa; }
  .bg-li { background: #f8f9fa; }
  
  /* bottom-to-top button */
  a.move-top {
    width: 34px;
    height: 34px;
    background: url(../images/Lalbagh.jpg) no-repeat 0px 0px;
    display: inline-block;
  }
  
  /* header */
  .main-top {
    position: relative;
  }
  
  header {
    position: absolute;
    width: 100%;
    z-index: 9;
  }
  
  /* navigation */
  nav {
    margin: 0;
    padding: 0;
    position: fixed; /* Fixed position */
    top: 0; /* Stick to the top */
    left: 0; /* Stick to the left */
    width: 100%; /* Full width */
    z-index: 1000; /* Ensure it stays above other elements */
    background-color: beige; /* Add background color */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
  }
  
  #logo a {
    float: left;
    display: initial;
    font-weight: 700;
    font-size: 36px;
    color: #fff;
    text-shadow: 2px 5px 3px rgba(0, 0, 0, 0.06);
    font-family: "Work Sans", sans-serif;
    padding: 0;
  }
  
  #menu-toggle {
    display: none;
  }
  
  .toggle {
    display: none;
    cursor: pointer;
    font-size: 24px;
  }
  
  /* Adjust nav:after and nav ul to remove conflicting position properties */
  nav:after {
    content: "";
    display: table;
    clear: both;
  }
  
  nav ul {
    float: right;
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
  }
  
  /* Positioning and styling for navigation items */
  nav ul li {
    margin: 0px;
    display: inline-block;
    float: left;
  }
  
  nav a {
    text-transform: capitalize;
    display: inline-block;
    color: #000;
    font-size: 15px;
    letter-spacing: 1px;
    font-weight: 500;
    background: #fff;
    padding: 7px 20px;
    border-radius: 20px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
  }
  
  /* Styling for dropdowns and hover effects */
  nav ul ul {
    display: none;
    position: absolute;
    top: 36px;
    background: #333;
    padding: 10px;
    border-radius: 4px;
    z-index: 9;
  }
  
  nav ul li:hover > ul {
    display: inherit;
  }
  
  nav ul ul li {
    width: 170px;
    float: none;
    display: list-item;
    position: relative;
    margin-bottom: 10px;
    border-radius: 4px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
  }
  
  nav ul ul li a {
    color: #fff;
    padding: 5px 10px;
    display: block;
    font-size: 14px;
    background: transparent;
  }
  
  /* Nested dropdown adjustments */
  nav ul ul ul li {
    position: relative;
    top: -60px;
    left: 170px;
  }
  
  li > a:only-child:after {
    content: "";
  }
  
    a.reqe-button {
      border: 2px solid rgba(255, 255, 255, 0.35);
      border-radius: 4px;
    }
    
    /* Media Queries
    --------------------------------------------- */
    @media (max-width: 1080px) {
      nav a {
        font-size: 14px;
        padding: 7px 15px;
      }
    }
    
    @media (max-width: 800px) {
      nav a {
        font-size: 14px;
      }
    }
    
    /* @media (max-width: 768px) {
      nav a {
        padding: 6px 9px;
      }
    } */
    @media (max-width: 768px) {
      .nav-links {
          display: none;
          flex-direction: column;
          position: fixed; /* Position it fixed on the screen */
          top: 0;
          right: 0; /* Start at the right side of the screen */
          background-color: #333;
          width: 50%; /* Adjust width of the sidebar */
          height: 100vh; /* Full height */
          justify-content: center; /* Center the links vertically */
          align-items: flex-start; /* Align links to the left inside the sidebar */
          padding-left: 20px; /* Add some padding inside the sidebar */
          box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5); /* Optional: Add shadow for effect */
          z-index: 1000; /* Make sure it's above other content */
      }
  
      .nav-links li {
          margin: 20px 0;
      }
  
      .toggle {
          display: flex;
      }
  
      .navbar.active .nav-links {
          display: flex;
      }
  }
    
    @media all and (max-width: 736px) {
      #logo {
        display: block;
        padding: 0;
        width: 100%;
        text-align: center;
        float: none;
      }
    
      nav {
        margin: 0;
      }
    
      /* Hide the navigation menu by default */
      /* Also hide the  */
      .toggle + a,
      .menu {
        display: none;
      }
    
      /* Stylinf the toggle lable */
      .toggle {
        display: block;
        padding: 8px 14px;
        font-size: 15px;
        text-decoration: none;
        border: none;
        float: right;
        background-color: #fff;
        color: #000;
        border-radius: 4px;
        letter-spacing: 1px;
        cursor: pointer;
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
        -ms-transition: 0.5s all;
      }
    
      .menu .toggle {
        float: none;
        text-align: center;
        margin: auto;
        max-width: 105px;
        padding: 5px;
        font-weight: normal;
        font-size: 15px;
        letter-spacing: 1px;
      }
    
      .toggle:hover {
        color: #1552fc;
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
        -ms-transition: 0.5s all;
      }
    
      /* Display Dropdown when clicked on Parent Lable */
      [id^="drop"]:checked + ul {
        display: block;
        background: #fff;
        padding: 15px 0;
        text-align: center;
        width: 100%;
      }
    
      /* Change menu item's width to 100% */
      nav ul li {
        display: block;
        width: 100%;
        padding: 5px 0;
      }
    
      nav ul ul .toggle,
      nav ul ul a {
        padding: 0 40px;
      }
    
      nav ul ul ul a {
        padding: 0 80px;
      }
    
      nav a:hover,
      nav ul ul ul a {
        background-color: transparent;
      }
    
      nav ul li ul li .toggle,
      nav ul ul a,
      nav ul ul ul a {
        padding: 14px 20px;
        color: #fff;
        font-size: 17px;
      }
    
      /* 
        nav ul li ul li .toggle,
        nav ul ul a {
            background-color: #212121;
        } */
    
      /* Hide Dropdowns by Default */
      nav ul ul {
        float: none;
        position: static;
        color: #fff;
        /* has to be the same number as the "line-height" of "nav a" */
      }
    
      /* Hide menus on hover */
      nav ul ul li:hover > ul,
      nav ul li:hover > ul {
        display: none;
      }
    
      /* Fisrt Tier Dropdown */
      nav ul ul li {
        display: block;
        width: 100%;
        padding: 0;
      }
    
      nav ul ul ul li {
        position: static;
        /* has to be the same number as the "width" of "nav ul ul li" */
      }
    
      nav a {
        color: #000;
        font-size: 15px;
        padding: 0;
      }
    
      nav ul ul li a {
        color: #000;
      }
    
      nav ul ul li a {
        font-size: 15px;
      }
    
      .menu li a.active,
      .menu li a:hover {
        color: #1552fc;
        background: transparent;
      }
    }
    
    @media all and (max-width: 375px) {
      nav a,
      .menu .toggle {
        font-size: 14px;
      }
    
      .toggle {
        padding: 7px 10px;
        font-size: 14px;
      }
    }
    
    /*-- dropdown --*/
    #demo {
      margin: 10px 0 0px 0;
      font-family: "Lato", sans-serif;
    }
    
    #demo .wrapper {
      display: inline-block;
      position: relative;
    }
    
    #demo .parent {
      height: 100%;
      width: 100%;
      display: block;
      cursor: pointer;
      line-height: 30px;
      height: 30px;
      color: #fff;
      z-index: 2;
      position: relative;
      -webkit-transition: border-radius 0.1s linear, background 0.1s linear,
        z-index 0s linear;
      -webkit-transition-delay: 0.8s;
      text-align: center;
      font-family: "Lato", sans-serif;
      color: #fff;
      text-transform: capitalize;
      font-weight: 500;
      font-size: 15px;
      letter-spacing: 1px;
      padding-left: 0;
      padding-right: 0;
    }
    
    #demo .parent:hover,
    #demo .content:hover ~ .parent {
      -webkit-transition-delay: 0s, 0s, 0s;
    }
    
    #demo .content:hover ~ .parent {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      z-index: 0;
    }
    
    #demo .content {
      position: absolute;
      top: 0;
      display: block;
      z-index: 1;
      height: 0;
      width: 150px;
      padding-top: 30px;
      -webkit-transition: height 0.5s ease;
      -webkit-transition-delay: 0.4s;
    }
    
    #demo .wrapper:active .content {
      height: 150px;
      z-index: 3;
      -webkit-transition-delay: 0s;
    }
    
    #demo .content:hover {
      height: 150px;
      z-index: 3;
      -webkit-transition-delay: 0s;
    }
    
    #demo .content ul {
      background: #fff;
      margin: 0;
      padding: 0;
      overflow: hidden;
      height: 100%;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }
    
    #demo .content ul a {
      text-decoration: none;
      padding: 0;
    }
    
    #demo .content li:hover {
      background: #f8f9fa;
    }
    
    #demo .content li {
      list-style: none;
      text-align: left;
      color: #999;
      font-size: 16px;
      line-height: 30px;
      height: 40px;
      line-height: 40px;
      padding-left: 10px;
      border-top: 1px solid #eee;
    }
    
    #demo .content li:last-of-type {
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }
  
  
    
    /* //dropdown */
    /* //navigation */
    /* //header */
  
  /* image parallely */
    .image-container {
      display: flex; /* Flexbox to align images side by side */
      justify-content: space-between; /* Optional: Adjust spacing between images */
      align-items: center; /* Optional: Align items vertically centered */
  }
  
  .image-container img {
      max-width: 100%; /* Adjust the width of images */
      height: auto; /* Maintain aspect ratio */
      border: 2px solid #ddd; /* Optional: Add border to images */
      padding: 5px; /* Optional: Add padding around images */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add shadow to images */
  }
  
  .image-overlay {
    position: relative;
    width: 100vw; /* Full width of the viewport */
    height: 100vh; /* Full height of the viewport */
    overflow: hidden; /* Prevents any content overflow */
  }
  
  .image-overlay img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures the image covers the whole container */
  }
  
  .text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the text */
    color: white;
    font-size: 28px; /* Adjust font size as needed */
    font-weight: bold;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for better readability */
    /* padding: 20px; */
    border-radius: 10px; /* Optional: Rounded corners */
  }
    
    /* banner */
    
    /* @media (max-width: 768px) {
      .main-w3pvt {
        object-fit: contain;  /* Change fit behavior for mobile */
        /* height: 50vh;  /* Set height to 50% of viewport height for mobile */
        /* width: 100%;
      }
    } */
    /* .banner-img img {
      border-radius: 69% 31% 24% 76% / 53% 59% 41% 47%;
    } */
    
    /* .banner-tops-style {
      padding-top: 12em;
    } */
    
    .style-banner {
      padding-top: 3em;
    }
    
    /* .style-banner h3 {
      font-size: 48px;
      line-height: 1.3;
      position: relative;
    } */
    
    .style-banner h3:after,
    h4.middle-title-w3:after {
      content: "";
      background: #fff;
      width: 100px;
      height: 2px;
      position: absolute;
      bottom: -25px;
      left: 0;
    }
    
    .style-banner h3 span {
      color: #fff;
    }
    
    .button-style {
      padding: 12px 25px;
      border: none;
      color: #fff;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 1px;
      border: 2px solid #feca57;
      background: #feca57;
    }
    
    .button-style:hover {
      opacity: 0.9;
      color: #fff;
    }
    
    .main-w3pvt {
      position: relative;
    }
    
    /* ball animation effect */
    .icon-effects-w3 {
      position: absolute;
      top: 6%;
    }
    
    @keyframes slide {
      0% {
        left: 0;
        top: 0;
      }
    
      50% {
        left: 400px;
        top: 60px;
      }
    
      100% {
        left: 800px;
        top: 0;
      }
    }
    
    @media (max-width: 900px) {
      @keyframes slide {
        0% {
          left: 0;
          top: 0;
        }
    
        50% {
          left: 200px;
          top: 60px;
        }
    
        100% {
          left: 500px;
          top: 0;
        }
      }
    }
    
    @media (max-width: 480px) {
      @keyframes slide {
        0% {
          left: 0;
          top: 0;
        }
    
        50% {
          left: 100px;
          top: 40px;
        }
    
        100% {
          left: 300px;
          top: 0;
        }
      }
    }
    
    @media (max-width: 320px) {
      @keyframes slide {
        0% {
          left: 0;
          top: 0;
        }
    
        50% {
          left: 100px;
          top: 40px;
        }
    
        100% {
          left: 250px;
          top: 0;
        }
      }
    }
    
    
    .stage {
      height: 150px;
      position: relative;
      min-width: 100%;
    }
    
    .stage .ball {
      animation-name: slide;
      animation-duration: 5s;
      animation-timing-function: ease-in-out;
      animation-delay: 0.5s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }
    
    .ball {
      background: #fff;
      border-radius: 50%;
      height: 20px;
      position: absolute;
      width: 20px;
    }
    
    /* //ball animation effect */
    
    /* image animation effect */
    .icon-effects-w3-2 {
      position: absolute;
      bottom: 38%;
      left: 3%;
    }
    
    .icon-effects-w3-2 img {
      -webkit-animation: fa-spin 5s infinite linear;
      -moz-animation: fa-spin 5s infinite linear;
      -ms-animation: fa-spin 5s infinite linear;
      -o-animation: fa-spin 5s infinite linear;
      animation: fa-spin 5s infinite linear;
    }
    
    /* //image animation effect */
    /* //banner text */
    
    /* what we do */
    h3.title-w3 {
      font-size: 40px;
    }
    
    .bottom-gd h3 {
      font-size: 25px;
      letter-spacing: 1px;
    }
    
    .bottom-gd p {
      font-size: 15px;
    }
    
    .fetured-sec img {
      box-shadow: 14px 14px 50px -20px rgba(0, 0, 0, 0.75);
    }
    
    /* //what we do */
    
    /* events */
    .box16 {
      text-align: center;
      color: #fff;
      position: relative;
    }
    
    .box16 .box-content,
    .box16:after {
      width: 100%;
      position: absolute;
      left: 0;
    }
    
    .box16:after {
      content: "";
      height: 100%;
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0.08) 69%,
        rgba(0, 0, 0, 0.76) 100%
      );
      top: 0;
      transition: all 0.5s ease 0s;
    }
    
    .box16 img {
      width: 100%;
      height: auto;
    }
    
    .box16 .box-content {
      padding: 20px;
      margin-bottom: 20px;
      bottom: 0;
      z-index: 1;
    }
    
    .box16 .title {
      font-size: 22px;
      font-weight: 700;
    }
    
    .box16 .post {
      display: block;
      padding: 8px 0;
      font-size: 15px;
    }
    
    .box16 .social li a,
    .box17 .icon li a {
      border-radius: 50%;
      font-size: 20px;
      color: #fff;
    }
    
    .box16:hover .post,
    .box16:hover .title {
      transform: translateY(0);
    }
    
    h3.title a {
      color: #fff;
    }
    
    h3.title a:hover {
      color: #feca57;
    }
    
    /* //events */
    
    /* services */
    .abt-block h3 {
      font-size: 24px;
      font-weight: 600;
      color: #000;
      letter-spacing: 1px;
    }
    
    /* //services */
    
    /* testimonials */
    .clients {
      /* background: url(../images/ECE.jpg) no-repeat center; */
     
      background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      -moz-background-size: cover;
      -ms-background-size: cover;
      position: relative;
    }
    
    .feedback-top p {
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.8;
      color: #e4e4e4;
    }
    
    .carousel-indicators li {
      width: 12px;
      height: 12px;
      background-color: #fff;
      border-radius: 50%;
      cursor: pointer;
      margin: 0 5px;
    }
    
    .carousel-indicators .active {
      background-color: #ff6b6b;
    }
    
    .carousel-indicators {
      bottom: 0;
    }
    
    .img-pois-w3ls-2 {
      position: absolute;
      bottom: 0;
      left: 0;
    }
    
    /* //testimonials */
    
    /* footer */
    footer {
      background: url(../images/ECE.jpeg) no-repeat center !important;
      background-size: cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      -moz-background-size: cover;
    }
    
    .w3l-footer h2 a {
      font-size: 40px;
      color: #fff;
      letter-spacing: 1px;
    }
    
    .w3l-footer h3 {
      font-size: 26px;
    }
    
    .w3l-footer p,
    .w3l-footer p a,
    .w3l-footer ul li a {
      font-size: 14px;
      color: #efefef;
      letter-spacing: 1px;
    }
    
    .w3l-footer ul li i {
      color: #feca57;
      line-height: 2;
    }
    
    /* copyright */
    p.copy-right-grids {
      font-size: 14px;
      color: #fff;
      letter-spacing: 2px;
    }
    
    p.copy-right-grids a {
      color: #feca57;
    }
    
    p.copy-right-grids a:hover {
      color: #fff;
    }
    
    /* //copyright */
    /* subscribe */
    .n-right-w3ls input[type="email"] {
      padding: 14px;
      border: none;
      letter-spacing: 1px;
      font-size: 15px;
      background: #fff;
      color: #000;
      border-radius: 0px;
    }
    
    .n-right-w3ls button {
      background: #feca57;
      border: none;
      color: #fff;
      font-size: 16px;
      letter-spacing: 1px;
      cursor: pointer;
      padding: 13px;
      width: 36%;
    }
    
    .n-right-w3ls button:hover {
      opacity: 0.9;
    }
    
    /* //subscribe */
    /* social links */
    .socila-bottom ul li {
      display: inline-block;
    }
    
    .socila-bottom ul li a {
      color: #fff;
      font-size: 18px;
      letter-spacing: 1px;
      font-family: "Playfair Display", serif;
    }
    
    .socila-bottom ul li a:hover {
      color: #feca57;
    }
    
    /* //social links */
    /* //footer */
    
    /* inner pages */
    .banner-w3ls-2 {
      background-position: center;
      min-height: 300px;
    }
    
    /* page details */
    .breadcrumb li a {
      color: #fff;
      background: #313131;
      padding: 8px 18px;
      display: inline-block;
      border-radius: 25px;
      font-size: 13px;
      letter-spacing: 1px;
    }
    
    .breadcrumb-item.active {
      padding-top: 0.5em;
      font-size: 15px;
      letter-spacing: 1px;
    }
    
    /* //page details */
    /* about */
    h4.about-left-agile {
      font-size: 21px;
      letter-spacing: 1px;
      line-height: 2em;
    }
    
    h4.about-left-agile span {
      color: #1552fc;
    }
    
    /* //about */
    
    /* team */
    .bottom-banner-w3layouts {
      background: url(../images/b3.jpg) no-repeat bottom;
      background-size: cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      -ms-background-size: cover;
    }
    
    .team-grid {
      width: 100%;
      cursor: pointer;
      overflow: hidden;
      position: relative;
      margin-bottom: 2em;
    }
    
    .team-img {
      position: relative;
    }
    
    .team-img:after {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 34%;
      content: " ";
      position: absolute;
      background: rgba(0, 0, 0, 0);
      transition-duration: 300ms;
      transition-property: all;
      transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
    }
    
    .team-img img {
      display: block;
      margin: 0 auto;
      text-align: center;
    }
    
    .team-info {
      left: auto;
      bottom: 0;
      width: 100%;
      padding: 0 20px;
      position: absolute;
      opacity: 0;
      color: #fff;
      -webkit-transform: translate3d(0, 10%, 0);
      transform: translate3d(0, 10%, 0);
      -webkit-transition: opacity 0.3s;
      -moz-transition: opacity 0.3s;
      -ms-transition: opacity 0.3s;
      -o-transition: opacity 0.3s;
      transition: opacity 0.3s;
    }
    
    .team-info h4 {
      font-size: 22px;
      font-weight: 600;
      margin: 0 0 10px;
      color: #fff;
    }
    
    .team-info span {
      display: block;
      font-size: 0.9em;
      color: #fff;
      letter-spacing: 2px;
    }
    
    .team-grid:hover .team-img:after {
      background: #feca57;
      transition-duration: 300ms;
      transition-property: all;
      transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
    }
    
    .team-grid:hover .team-info {
      -webkit-transform: translate3d(0, -5%, 0);
      transform: translate3d(0, -5%, 0);
      -webkit-transform: translate3d(0, -10%, 0);
      transform: translate3d(0, -10%, 0);
    }
    
    .team-grid:hover .team-info {
      opacity: 1;
      -webkit-transition: all 0.4s;
      -moz-transition: all 0.4s;
      -ms-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s;
    }
    
    ul.social-icons li {
      list-style-type: none;
    }
    
    ul.social-icons li a i {
      color: #fff;
      -webkit-transition: all 0.4s;
      -moz-transition: all 0.4s;
      -ms-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s;
      border: 1px solid #eee;
      width: 35px;
      height: 35px;
      line-height: 35px;
      font-size: 12px;
    }
    
    .team-grid i.fab.fa-facebook-f:hover {
      background: #3b5998;
      border: 1px solid #3b5998;
      -webkit-transition: all 0.4s;
      -moz-transition: all 0.4s;
      -ms-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s;
    }
    
    .team-grid i.fab.fa-twitter:hover {
      background: #1da1f2;
      border: 1px solid #1da1f2;
      -webkit-transition: all 0.4s;
      -moz-transition: all 0.4s;
      -ms-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s;
    }
    
    .team-grid i.fab.fa-google-plus-g:hover {
      background: #dd4b39;
      border: 1px solid #dd4b39;
      -webkit-transition: all 0.4s;
      -moz-transition: all 0.4s;
      -ms-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s;
    }
    
    /* //team */
    
    /* gallery page */
    /* popup */
    .popup-effect {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.7);
      transition: opacity 0ms;
      visibility: hidden;
      opacity: 0;
      z-index: 99;
    }
    
    .popup-effect:target {
      visibility: visible;
      opacity: 1;
    }
    
    .popup {
      background: #fff;
      border-radius: 4px;
      max-width: 430px;
      position: relative;
      margin: 8em auto;
      padding: 3em 2em;
      z-index: 999;
      text-align: center;
    }
    
    .popup .close {
      position: absolute;
      top: 5px;
      right: 15px;
      transition: all 200ms;
      font-size: 30px;
      font-weight: bold;
      text-decoration: none;
      color: #000;
    }
    
    .popup .close:hover {
      color: #686de0;
    }
    
    /* //popup */
    /* //gallery page */
    
    /* contact */
    .bunt-w3-link {
      padding: 11px 28px;
      color: #fff;
      font-weight: 600;
      letter-spacing: 1px;
      font-size: 16px;
      background: #feca57;
      border: none;
    }
    
    form.register-wthree .form-control {
      background: #eee;
      font-size: 1em;
    }
    
    textarea {
      height: 200px;
      resize: none;
    }
    
    form.register-wthree .form-control {
      background: #f3f3f3;
      padding: 13px 10px;
      border: none;
      border-left: 3px solid #1552fc;
      -webkit-box-shadow: 2px 8px 10px 0px rgba(50, 46, 46, 0.23);
      -moz-box-shadow: 2px 8px 10px 0px rgba(50, 46, 46, 0.23);
      box-shadow: 2px 8px 10px 0px rgba(50, 46, 46, 0.23);
    }
    
    button.btn-aasana-w3 {
      background: #1552fc;
      color: #ffffff;
      padding: 11px;
      letter-spacing: 1px;
      margin-top: 0.8em;
    }
    
    .w3l-map iframe {
      width: 100%;
      min-height: 400px;
      border: none;
      display: block;
    }
    
    /* //contact */
    
    /* responsive */
    
    @media (max-width: 1680px) {
    }
    
    @media (max-width: 1600px) {
    }
    
    @media (max-width: 1440px) {
      .w3l-footer h2 a {
        font-size: 36px;
      }
    
      .w3l-footer h3 {
        font-size: 24px;
      }
    }
    
    @media (max-width: 1366px) {
      .banner-w3ls-2 {
        min-height: 250px;
      }
    
      .w3l-map iframe {
        min-height: 350px;
      }
    }
    
    @media (max-width: 1280px) {
    }
    
    @media (max-width: 1080px) {
      .style-banner {
        padding-top: 0;
      }
    
      .banner-img {
        margin-bottom: 4em;
      }
    
      .style-banner h3 {
        font-size: 42px;
      }
    
      .abt-block p {
        font-size: 14px;
      }
    
      .blog h5 a {
        font-size: 18px;
      }
    
      .n-right-w3ls input[type="email"] {
        font-size: 14px;
      }
    
      .n-right-w3ls button {
        font-size: 15px;
      }
    
      .socila-bottom ul li a {
        font-size: 17px;
      }
    
      .banner-w3ls-2 {
        min-height: 200px;
      }
    
      .team-img:after {
        height: 42%;
      }
    
      .w3l-map iframe {
        min-height: 320px;
      }
    }
    
    @media (max-width: 1050px) {
    }
    
    @media (max-width: 1024px) {
      form.register-wthree .form-control {
        font-size: 0.9em;
      }
    
      textarea {
        height: 170px;
      }
    }
    
    @media (max-width: 991px) {
      .banner-tops-style {
        padding-top: 10em;
      }
    
      h3.title-w3 {
        font-size: 38px;
      }
    
      .event-wthrees {
        padding: 0 0.5em;
      }
    
      .box16 .title {
        font-size: 20px;
      }
    
      ul.social-icons li a i {
        width: 30px;
        height: 30px;
        line-height: 30px;
      }
    
      .team-info span {
        font-size: 0.8em;
      }
    
      .team-img:after {
        height: 53%;
      }
    }
    
    @media (max-width: 900px) {
    }
    
    @media (max-width: 800px) {
      .style-banner h3 {
        font-size: 38px;
      }
    
      .banner-tops-style h4 {
        font-size: 20px;
      }
    
      .w3l-footer h2 a {
        font-size: 32px;
      }
    }
    
    @media (max-width: 768px) {
    }
    
    @media (max-width: 736px) {
      .bottom-gd p {
        font-size: 14px;
      }
    
      .feedback-top p {
        font-size: 14px;
      }
    
      .team-img:after {
        height: 34%;
        width: 69%;
        margin: 0 auto;
        left: 0;
        right: 0;
      }
    
      a.single-text.text-dark.font-weight-light {
        font-size: 20px;
      }
    }
    
    @media (max-width: 667px) {
      h3.title-w3 {
        font-size: 34px;
      }
    
      .w3l-footer p,
      .w3l-footer p a,
      .w3l-footer ul li a {
        font-size: 13px;
      }
    
      .banner-w3ls-2 {
        min-height: 180px;
      }
    }
    
    @media (max-width: 640px) {
      .banner-tops-style {
        padding-top: 8em;
      }
    }
    
    @media (max-width: 600px) {
      .bottom-gd h3 {
        font-size: 23px;
      }
    }
    
    @media (max-width: 568px) {
      .style-banner h3 {
        font-size: 32px;
      }
    
      p {
        font-size: 14px;
      }
    
      .blog {
        text-align: center;
      }
    
      p.copy-right-grids {
        letter-spacing: 1px;
      }
    
      .icon-effects-w3-2 {
        bottom: 47%;
      }
    
      .team-img:after {
        width: 67%;
      }
    
      .w3l-map iframe {
        min-height: 280px;
      }
    }
    
    @media (max-width: 480px) {
      .banner-img {
        margin-bottom: 3em;
      }
    
      .button-style {
        padding: 12px 20px;
        font-size: 13px;
      }
    
      #logo a {
        font-size: 34px;
      }
    
      .icon-effects-w3-2 {
        bottom: 43%;
      }
    
      .banner-w3ls-2 {
        min-height: 150px;
      }
    
      .team-img:after {
        width: 81%;
      }
    
      h5.card-title a {
        font-size: 22px;
      }
    
      h6.blog-first {
        font-size: 16px;
      }
    }
    
    @media (max-width: 440px) {
      .banner-img {
        margin-top: 2em;
      }
    
      .style-banner h3 {
        font-size: 30px;
      }
    
      h3.title-w3 {
        font-size: 30px;
      }
    
      .feedback-top p {
        font-size: 13px;
      }
    
      .team-img:after {
        width: 89%;
      }
    
      .popup {
        margin-left: 1em;
        margin-right: 1em;
      }
    }
    
    @media (max-width: 414px) {
      .socila-bottom ul li a {
        font-size: 16px;
      }
    
      p.copy-right-grids {
        font-size: 13px;
      }
    
      .team-img:after {
        width: 95%;
      }
    
      a.single-text.text-dark.font-weight-light {
        font-size: 18px;
      }
    }
    
    @media (max-width: 384px) {
      #logo a {
        font-size: 32px;
      }
    
      .bottom-gd h3 {
        font-size: 21px;
      }
    
      .icon-effects-w3-2 {
        bottom: 39%;
      }
    
      .banner-w3ls-2 {
        min-height: 130px;
      }
    
      .team-img:after {
        width: 100%;
      }
    }
    
    @media (max-width: 375px) {
      .style-banner h3 {
        font-size: 28px;
      }
    
      p {
        font-size: 13px;
      }
    
      .banner-tops-style h4 {
        font-size: 19px;
      }
    
      .socila-bottom li.mx-4 {
        margin: 0 0.5em !important;
      }
    
      .breadcrumb li a {
        font-size: 12px;
      }
    
      .breadcrumb-item.active {
        font-size: 14px;
      }
    
      .category-story.tech-btm ul li a {
        font-size: 14px;
      }
    }
    
    @media (max-width: 320px) {
      .style-banner h3 {
        font-size: 25px;
      }
    
      .banner-tops-style h4 {
        font-size: 18px;
      }
    
      .main-w3pvt {
        min-height: 780px;
        min-width: 100%;
        height: 100vh;
        width: 100%;
      }
    
      .banner-img {
        margin-bottom: 2em;
      }
    
      #logo a {
        font-size: 28px;
      }
    
      .banner-tops-style {
        padding-top: 6em;
      }
    
      .main-w3pvt {
        min-height: 740px;
      }
    
      .bottom-gd p {
        font-size: 13px;
      }
    
      h3.title-w3 {
        font-size: 28px;
      }
    
      .abt-block p {
        font-size: 13px;
      }
    
      .blog h5 a {
        font-size: 17px;
      }
    
      .socila-bottom ul li a {
        font-size: 15px;
      }
    
      .n-right-w3ls input[type="email"] {
        font-size: 13px;
      }
    
      .n-right-w3ls button {
        font-size: 14px;
        width: 40%;
      }
    
      .w3l-footer p,
      .w3l-footer p a,
      .w3l-footer ul li a {
        font-size: 12px;
      }
    
      .icon-effects-w3-2 {
        bottom: 36%;
      }
    
      .banner-w3ls-2 {
        min-height: 120px;
      }
    
      h4.about-left-agile {
        font-size: 20px;
      }
    
      .team-img:after {
        height: 42%;
      }
    
      .popup {
        padding: 2.5em 1.5em 2em;
      }
    
      textarea {
        height: 140px;
      }
    }
    
    
    
    
    
    
    /* //responsive */