/* font-family: 'Montserrat'; font-family: 'Source Sans 3'; */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

/* font-family: "OpenSansSemiBold"; */
@font-face {
    font-family: OpenSansSemibold;
    src: url("/media/fonts/OpenSansSemiBold/OpenSansSemiBold.eot");
    src: url("/media/fonts/OpenSansSemiBold/OpenSansSemiBold.eot?#iefix")format("embedded-opentype"),
    url("/media/fonts/OpenSansSemiBold/OpenSansSemiBold.woff") format("woff"),
    url("/media/fonts/OpenSansSemiBold/OpenSansSemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

/* font-family: "OpenSansRegular"; */
@font-face {
    font-family: OpenSansRegular;
    src: url("/media/fonts/OpenSansRegular/OpenSansRegular.eot");
    src: url("/media/fonts/OpenSansRegular/OpenSansRegular.eot?#iefix")format("embedded-opentype"),
    url("/media/fonts/OpenSansRegular/OpenSansRegular.woff") format("woff"),
    url("/media/fonts/OpenSansRegular/OpenSansRegular.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

/* font-family: "OpenSansBold"; */
@font-face {
    font-family: OpenSansBold;
    src: url("/media/fonts/OpenSansBold/OpenSansBold.eot");
    src: url("/media/fonts/OpenSansBold/OpenSansBold.eot?#iefix")format("embedded-opentype"),
    url("/media/fonts/OpenSansBold/OpenSansBold.woff") format("woff"),
    url("/media/fonts/OpenSansBold/OpenSansBold.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

/* font-family: "OpenSansLight"; */
@font-face {
    font-family: OpenSansLight;
    src: url("/media/fonts/OpenSansLight/OpenSansLight.eot");
    src: url("/media/fonts/OpenSansLight/OpenSansLight.eot?#iefix")format("embedded-opentype"),
    url("/media/fonts/OpenSansLight/OpenSansLight.woff") format("woff"),
    url("/media/fonts/OpenSansLight/OpenSansLight.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}


@font-face {
    font-family: GeorgiaItalic;
    src: url('/media/fonts/Georgia Italic.ttf') format('truetype');
}

* {
  margin: 0;
  padding: 0;
}

/* -------------------------------------------- *
 * New Header
*/


#header-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  text-align: center;
  padding: 8px 4px;
  /* max-width: 1200px; */
}

#main-nav {
  width: 84%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap:2rem;
  max-width: 1200px;
  z-index: 1;
}

#site-logo {
  height: 60px;
  width: 105px;
}

#nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  height: 100%;
  flex: 1;
  list-style: none;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #47454f;
  margin: 0;
}

#nav-list.active {
  margin-top: 70px;
  transition-duration: 1000ms;
  z-index: 2;
}

.nav-list-link {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #47454f;
  text-decoration: none;
}

.nav-list-link:hover {
    text-decoration: none;
    color: #8fbc2d;
}

#contact-nav {
  /* padding: 16px 10px;
  width: 196px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #6A7422; */
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  border-radius: 10px;
}
#contact-nav a:visited{
    color:#fff;
}
#nav-contact-digits {
text-align: center;
  color: #fff;
} 
.cta-button-nav {
            background-color: #6a7422;
            color: #fff;
            display: inline-flex;
            align-items: center;
            padding: 10px 20px;
            border-radius: 10px;
            text-decoration: none;
            font-size: 18px;
            font-weight: bold;
            transition: background-color 0.3s, color 0.3s;
        }
        .cta-button-nav i {
            margin-right: 10px;
            color: #fff;
             text-decoration: none;
        }
 .cta-button-nav:link, .cta-button-nav:hover, .cta-button-nav:active , .cta-button-nav:visited{
            background-color: #566019;
            color: #fff;
             text-decoration: none;
        }
.cta-button-nav:link i,.cta-button-nav:hover i, .cta-button-nav:active i , .cta-button-nav:visited{
            color: #fff;
             text-decoration: none;
        }

#menu-burger {
  display: none;
  font-size: 20px;
  cursor: pointer;
}

/* -------------------------------------------- *
 * CTA section
*/

#cta-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 5rem;
  }
  
  .cta {
    width: 1001px;
    height: 300px;
    border-radius: 7px;
    background-color: #6a7422;
    color: #fff;
    display: flex;
  }
  
  .cta-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 15px;
  }
  
  .cta-content h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 54px;
  }
  
  .cta-p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
  }
  
  .contact {
    height: 42px;
    width: 160px;
    border-radius: 7px;
    background-color: #fff;
    color: #6a7422;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
  }
  
  .contact p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
  }

  /* -------------------------------------------- *
   * Footer
  */

  #footer-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #7474c1;
      font-family: "Source Sans 3", sans-serif !important;
      color: #fff !important;
      padding: 20px 0;
    }
    
    #footer-list-container {
      display: flex;
      justify-content: space-between;
      width: 90%;
    }
    
    .footer-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    
    .list-header {
      height: 25px;
      font-weight: 700;
      font-size: 18px;
      line-height: 25px;
      margin-bottom: 3px;
    }

     .footer-list>li {
      font-weight: 400;
      font-size: 16px;
      color: #fff;
    }
    
    .footer-list>li>a {
      font-weight: 400;
      font-size: 16px;
      color: #fff;
    }

    
    .line {
      width: 90%;
      margin-top: 20px;
    }
    
  #footer-bottom {
      width: 90%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    #footer-bottom p {
      font-weight: 600;
      font-size: 16px;
    }

    #footer-bottom>p>a {
      font-weight: 600;
      font-size: 16px;
      color: #fff;
    }
    
    #social-links {
      display: flex;
      width: 33%;
      gap: 3rem;
      list-style: none;
    }
    
    #social-links i {
      color: #fff;
      font-size: 16px;
    }
    
    #footer-bottom div {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #7474c1;
      /* display: none */
    }
    
    i {
      color: #7474c1;
    }
  

/* -------------------------------------------- *
 * Header
*/
/* 
#main-container #header-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 819px;
   background: #6E6E6E url(/media/images/header-background.jpg) no-repeat center;
    background: #6E6E6E url(/media/images2023/hero-background.png) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#header-image h1 {
    font-family:  OpenSansSemibold;
    font-size: 40px;
    color: white;
    padding-top: 65px;
    margin: 0 !important;
}

#main-container #header-image h1 {
    padding-top: 0px !important;
}

#main-container #header-image h3 {
    margin-top: 14px; 
} 

#header-image p {
    font-family:  OpenSansRegular;
    font-size: 24px;
    color: white;
    padding-top: 10px;
} */

/* header 2023 */

.hero-background-section {
  margin: 0;
  padding: 0;
  background-image: url(/media/images2023/hero-background.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  min-height: 660px;
  margin-top: 6px;
}

.hero-container-main {
  padding: 0 20px;
}

.hero-container-main h1 {
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
}

.hero-container-main p {
  font-family: "Source Sans 3", sans-serif;
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 30px;
}

.hero-container-main a {
  font-family: 'Montserrat', sans-serif;
  display: inline-block;
  padding: 15px 30px;
  font-weight: bold;
  border: 2px solid #fff;
  background-color: transparent;
  color: #fff;
  font-size: 18px;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.3s ease;
  width: 220px;
}

.hero-container-main > * {
  margin: 5px 0;
}

.hero-container-main a:hover {
  background-color: #fff;
  color: #333;
}

@media screen and (max-width: 768px) {
  .hero-container-main h1 {
    font-size: 36px;
  }

  .hero-container-main p {
    font-size: 16px;
  }

  .hero-container-main a {
    font-size: 16px;
    padding: 12px 24px;
  }
}

/* end */

#logo-img a img {
    position: relative;
    z-index: 100;    
}

#logo-img {
    margin: 20px 0px; 
    
}

#main-container #logo-img {
    margin-top: 20px;    
}

#contact-phone{
    font-family:  OpenSansRegular;
    color: #8ab42e !important;
    font-size: 24px;
    padding-top: 42px;
    padding-bottom: 10px;
}

/*
#careers-container #contact-phone {
    padding-top: 35px;
}
*/

#main-container #contact-phone {
    padding-top: 45px;
    padding-bottom: 8px;
}

#contact-phone a{
    font-family:  OpenSansRegular;
    color: #8ab42e !important;
    font-size: 24px;
    text-decoration: none;
}

#contact-phone img {
    margin-top: 0px !important;
    vertical-align: middle;
}

.navbar {
   background-color: transparent;
   background: transparent;
   border-color: transparent;
}

.navbar-collapse {
    padding-right: 0px;    
}

#menu-links li {
    display: inline-block;
    padding-left: 24px;
    font-size: 18px;
}

#menu-links li a {
    font-family:  OpenSansRegular;
/*    font-size: 18px;*/
    color: #4c4c4c;
    padding-top: 5px;
    background-color: transparent !important;
    padding: 0px;
}

#main-container #menu-links li a {
    color: white;
}

#menu-links li a:hover, #menu-links li a:focus {
    color: #8fbc2d !important;
    text-decoration: none;
    background-color: transparent;
}

.dropdown.open .dropdown-toggle:after {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 7.5px 5px 7.5px;
	border-color: transparent transparent #8fbc2d transparent;
	content: '';
	clear: both;
    display: block;
	margin-top: 15px;
}

.dropdown-menu li {
    padding-left: 0 !important;
	width: 100%;
}
	
.dropdown-ul li a{
    color: #4c4c4c !important;
    padding-left: 0px;
    font-family:  OpenSansRegular;
    font-size: 14px;
    margin-top: 10px;
}

.dropdown-menu {
    border-radius: 0px;
    border-top: 3px solid #8fbc2d; 
    min-width: auto;
    margin-top: 0 !important;
    padding: 15px 40px 25px;
    margin: 0 !important;
    margin-left: -15px !important;
}

.navbar-nav {
    float: right !important;    
}

#menu-nav {
    margin: 0;
}

.navbar {
    min-height: 25px;
    margin-top: 17px;
}

#header-txt {
    margin-top: 260px;
    color: white;
}

#header-txt h1 {
    font-family:  OpenSansSemibold;
    font-size: 40px;
    margin-top: 50px;
}

#header-txt h3 {
    font-family:  OpenSansRegular;
    font-size: 24px;
}

#header-image .button {
    /* color: white; */
    color: black;
    font-family: OpenSansBold;
    font-size: 18px;
    /* background-color: #8fbc2d; */
    background-color: white;
    border-radius: 5px;
    border-color: transparent;
    width: 200px;
    height: 56px;
    margin-bottom: 175px;
    padding:  16px 50px;
}

#learn-more-btn {
    margin-top: 35px !important;    
}

#header-image .button:hover {
    background-color: transparent;
    color: white;
    /* color: #8fbc2d; */
    /* border: 1px solid #8fbc2d; */
    border: 1px solid white;
    text-decoration: none;
}

#down-arrow {
    margin-top: 190px;
}

/* -------------------------------------------- *
 * Services
*/
/* 
#services {
    margin-bottom: 105px;    
} */
/* 
#services div {
    height: auto;
   height: 300px;
    text-align: center;
    padding-left: 0px;
} */
/* 
#services p {
    font-family:  OpenSansRegular;
    font-size: 14px; 
    color: #717171;
} */
/* 
#strategy #design #total-commerce #development
{
    display: inline-block;
    vertical-align: bottom;
} */
/* 
#services h2 {
    font-family:  OpenSansSemibold;
    font-size: 40px;
    color: #4c4c4c;
    text-align: center;
    margin: 50px 0px;
    padding: 8px;
} */
/* 
#services h3 {
    font-family:  OpenSansBold;
    font-size: 18px;
    color: #4c4c4c;
    margin-top: 25px;
} */
/* 
#services .button {
    background-color: transparent;
    border-color: transparent;
} */
/* 
#total-commerce {
    padding-top: 3px;
}
#design {
    padding-top: 1px;
}

#development {
    padding-right: 0px;
    padding-top: 21px;
} */


.dev-banner-container {
  background-image: url("/media/images2023/banner.png");
  background-size: cover;
  background-position: center;
  height: 326px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.content {
  text-align: center;
}

.content h1 {
  font-family: "Montserrat", sans-serif;
 margin-bottom: 20px;
  font-size: 36px;
  font-weight: 700;
}

.content p {
 font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  margin-top: 0;
  padding: 0 20px;
  font-size: 18px;
  font-weight: 400;
}
.services {
 font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-top: 10px; */
  margin-bottom: 10px;
  /* padding: 10px; */
  padding: 50px 0;
}
.services .container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1200px;
}
.services .container .header {
  /* margin-top: 50px; */
  margin-bottom: 50px;
  h3 {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #0b061e;
    text-transform: capitalize;
  }
  h2 {
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    color: #0b061e;
    text-transform: capitalize;
  }
}

.active {
  display: none;
}
.services .container .services__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.services .container .services__inner .services__item {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  width: 260px;
  color: #0b061e;
  height: 260px;
  background-color: #f4f5f9;
  border-radius: 10px;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
  transition: 0.3s;
  padding: 10px;
  cursor: pointer;
  &:hover {
    transform: translateY(-10px);
    background-color: #7474c1;
    box-shadow: 5px 5px 10px rgba(116, 116, 193, 0.3);
    color: #fff;
    .services__img svg {
      fill: #fff;
    }
    .service-link {
      color: #fff;
    }
     .active {
      display: block;
    }
    .active-colored {
      display: none;
    }
  }
}

.services .container .services__inner .services__item-dev {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  max-width: 350px;
  color: #0b061e;
  height: 220px;
  background-color: #f4f5f9;
  border-radius: 10px;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
  transition: 0.3s;
  padding: 10px;
  cursor: pointer;
  &:hover {
    transform: translateY(-10px);
    background-color: #7474c1;
    box-shadow: 5px 5px 10px rgba(116, 116, 193, 0.3);
    color: #fff;
    .services__img svg {
      fill: #fff;
    }
    .service-link {
      color: #fff;
    }
     .active {
      display: block;
    }
    .active-colored {
      display: none;
    }
  }
}

.services .container .services__inner .services__item-commerce {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-direction: column;
  cursor: pointer;
  width: 350px;
  color: #0b061e;
  height: 250px;
  background-color: #f4f5f9;
  border-radius: 10px;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
  transition: 0.3s;
  padding: 10px;
  &:hover {
    transform: translateY(-10px);
    background-color: #7474c1;
    box-shadow: 5px 5px 10px rgba(116, 116, 193, 0.3);
    color: #fff;
    .services__img svg {
      fill: #fff;
    }
    .services__img .material-symbols-outlined {
      color: #fff;
    }
    .service-link {
      color: #fff;
    }
    .active {
      display: block;
    }
    .active-colored {
      display: none;
    }
  }
}


.services .container .services__inner .services__item-dev .services__img svg {
  font-size: 50px;
  fill: #7474c1;
  text-align: left;
}
.services .container .services__inner .services__item .services__img svg {
  font-size: 50px;
  fill: #7474c1;
  text-align: left;
}
.services .container .services__inner .services__item .services__text a {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  margin-top: 10px;
  color: #7474c1;
  text-decoration: underline;
  /* &:hover {
    color: #fff;
  } */
}

/* -------------------------------------------------------- */
 /* * About-Overview */
/* */ 


/* smartSaasHome 2023 */
 


.home-smart-saas-section {
    background-color: #3c345b;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    min-height: 700px;
  }
  
  .smart-saas-home-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    padding: 20px; 
  }
  
  .home-smart-saas-section h1 {
    font-family: Montserrat;
    font-size: 44px;
    font-weight: 700;
    line-height: 53.64px;
    text-align: center;
    color: #ffffff;
    margin-bottom: 20px; 
  }
  
  .home-smart-saas-section h2 {
    font-family: Montserrat;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    color: #ffffff;
    margin-bottom: 20px; 
  }
  
  .home-smart-saas-section span {
    /* display: block; */
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    width: 90%;
    max-width: 900px;
    text-align: center;
    margin: 20px auto;
    line-height: 1.6;
    font-size: 16px;
    font-weight: 300;
    
  }
  
  .smart-saas-home-features {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 36px;
    margin-top: 40px;
  }
  
  .smart-saas-home-feature {
    max-width: 300px;
    text-align: left;
    /* text-align: center; */
    margin-bottom: 20px; 
  }
  
  .smart-saas-home-feature img {
    text-align: center;
    width: 38px;
    height: 37.98px;
    margin-bottom: 10px; 
  }
  
  .smart-saas-home-feature h3 {
    font-family: Montserrat;
    font-size: 18px;
    font-weight: 700;
    line-height: 21.94px;
    color: #ffffff;
    margin-bottom: 10px; 
  }
  
  .smart-saas-home-feature p {
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-size: 15px;
    font-weight: 300;
    line-height: 17.6px;
    color: #ffffff;
    margin-bottom: 10px; 
  }
  
  .smart-saas-home-feature a {
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 700;
    line-height: 17.07px;
    color: #ffffff;
    text-decoration: underline; 
  }
  
  @media (max-width: 768px) {
     .content h1 {
    font-size: 24px;
  }

  .content p {
    font-size: 14px;
  }
  .services .container .header {
    h3 {
      font-size: 16px;
    }
    h2 {
      font-size: 18px;
    }
  }
    .home-smart-saas-section h1 {
      font-size: 36px;
    }
    .home-smart-saas-section h2 {
      font-size: 18px;
    }
    .home-smart-saas-section span {
      font-size: 16px;
    }
    .smart-saas-home-feature {
      text-align: center;
    }
    .smart-saas-home-feature h3 {
      font-size: 16px;
    }
    .smart-saas-home-feature p {
      font-size: 16px;
    }
  }
  
  @media (max-width: 480px) {
    .home-smart-saas-section h1 {
      font-size: 28px;
    }
    .home-smart-saas-section h2 {
      font-size: 16px;
    }
    .home-smart-saas-section span {
      font-size: 16px;
      /* line-height: 18px; */
    }
    .smart-saas-home-feature {
      max-width: 100%;
      text-align: center;
    }
    .smart-saas-home-feature h3 {
      font-size: 18px;
    }
    .smart-saas-home-feature p {
      font-size: 16px;
      /* line-height: 14px; */
    }
  }


/* smartSaasHome 2023 end */

/* Interior page 2023 */

.development {
    font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal
  display: flex;
  justify-content: center;
  align-items: center;

  /* padding: 10px; */
  flex-direction: column;
  padding: 50px 0;
  width: 100%;
  background-color: #f5f5f5;
}

.dev-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* flex-wrap: wrap; */
  margin: 0 auto;
  max-width: 1200px;
  gap: 20px;
  margin-top: 50px;
  margin-bottom: 50px;
}
.dev-container .development__content {
  display: flex;
  justify-content: start;
  align-items: center;

  gap: 20px;
  padding: 20px;
  flex-direction: column;
  flex: 1 1 50%;
}
.dev-container .development__content h1 {
  font-size: 28px;
  font-weight: 700;
  text-align: left;
  /* margin-bottom: 20px; */
  color: #7474c1;
}
.dev-container .development__content h2 {
  font-size: 40px;
  font-weight: 700;
  text-align: left;
  /* margin-bottom: 20px; */
  color: #0b061e;
}
.dev-container .development__content p {
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  line-height: 1.5;
}

.dev-container .development__content ul {
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  list-style-type: disc;
  padding: 20px;
  line-height: 1.5;
}
.dev-container .development__content ul li {
  margin-bottom: 10px;
}
.custom-bullets {
  list-style-type: none;
  position: relative;
  padding-left: 25px;
}
.nested-list {
  margin-left: 20px;
  list-style: number;
  padding: 0;
  margin-bottom: 0;
}

.nested-list li {
  margin-bottom: 5px;
  line-height: 1.3;
}

.development__img {
  flex: 1 1 50%;
  text-align: center;
  background-color: #f5f5f5;
}

.development__img img {
  width: 100%; /* Responsive image display */
  max-width: 500px; /* Set a maximum width for larger screens */
  border-radius: 20px;
}

/* Media Queries (Adjust as needed) */

@media only screen and (max-width: 768px) {
  .dev-container {
    flex-direction: column; /* Stack content vertically on small screens */
  }

  .development__content,
  .development__img {
    padding: 20px;
    flex: 1 0 100%; /* Take up 100% width on small screens */
  }
  .custom {
    flex-direction: column-reverse;
  }
}
/* Interior page end 2023 */


/* Blog page 2023 starts */

.banner-container {
  background-image: url("/media/images2023/blog-banner.png");
  background-size: cover;
  background-position: center;
  height: 326px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.content {
  text-align: center;
}

.content h1 {
  font-family: "Montserrat", sans-serif;
  margin-bottom: 5px;
  font-weight: 700;
}

.blogs {
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
}
/* .blog-title-post {
  width: 80%;
} */
.posts {
  justify-content: start;
}
.next {
  background-color: #7474c1;
  color: white;
  border: none;
  padding: 10px 20px;
  margin: 40px auto;
  font-size: 16px;
  border-radius: 5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 228px;
  display: block;
}
.next:hover {
  background-color: #5a5a9e;
}
.blog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.blog-card {
  display: flex;
  justify-content: around;
  align-items: center;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #8d8dcc;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin-bottom: 30px;
  transition: all 0.3s ease-in-out;
  padding: 10px;

  height: 496px;
}

.blog-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px); /* Add slight hover effect */
}

.blog-card__image {
  overflow: hidden;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.blog-card__image img {
  width: 100%;
  height: auto;
  transition: all 0.3s ease-in-out;
}

.blog-card__image:hover img {
  filter: contrast(1.1) brightness(1.1); /* Enhance image on hover */
}

.blog-card__content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: start;
  text-align: left;
  justify-content: start;
  flex-grow: 1;
}

.blog-card__title {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.blog-card__title:hover{
  text-decoration: underline;
  
}

.blog-card__excerpt {
  line-height: 1.5;
  font-size: 14px;
  margin-bottom: 15px;
  flex-grow: 1;
}

.blog-card__read-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 15px;
  border: 1px solid #6a7422;
  border-radius: 3px;
  text-decoration: none;
  width: 100%;
  text-align: center;
  color: #6a7422;
  transition: all 0.3s ease-in-out;
  font-weight: 500;
  margin-bottom: 0;
}

.blog-card__read-more:hover {
  background-color: #8d8dcc;
  color: #fff;
  border: 1px solid #8d8dcc;
}

/* Media Queries (Adjust as needed) */

@media only screen and (max-width: 480px) {
  .blog {
    grid-template-columns: 1fr;
  }

  /* .blog-card__image {
    }
  
    .blog-card__content {
      
    } */
}

/* Blog page 2023 ends */


/* content-blogg page 2023 */

.blog-page-content .page-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 40px;
  width: 100%;
  gap: 40px;
  background-color: #f4f5f9;
}

.blog-page-content .main-content {
  flex: 3;
  padding: 40px;
  max-width: 800px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  align-self: flex-start;
}

.blog-page-content .sidebar {
  flex: 1;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border: 1px solid #f1f1f1;
  max-width: 280px;
  max-height: 525px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blog-page-content .icon-container {
  width: 176px;
  text-align: left;
  margin-bottom: 20px;
}

.blog-page-content .rocket-icon {
  padding: 10px;
  width: auto;
  height: auto;
}

.blog-page-content p h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-style: bold;
  margin: 25px 0;
  font-size: 24px;
  color: rgb(29, 22, 22);
}

.blog-page-content p h2,h3,h4,h5 {
    font-family: "Montserrat", sans-serif;
    /* margin: 25px 0; */

}


.blog-page-content p  {
  font-family: "Source Sans 3", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #555;
  width: 100%;
  overflow: hidden;
}

.blog-page-content p img{
    width: 95%;
    border-radius: 7px;
    height: auto;
    margin: 20px 0;
}

.blog-page-content p ol {
  font-family: "Source Sans 3", sans-serif;
  font-size: 16px;
  list-style-type: disc;
  padding-left: 20px;
}

.blog-page-content p ul {
  font-family: "Source Sans 3", sans-serif;
  font-size: 16px;
  list-style-type: disc;
  padding-left: 20px;
}

.blog-page-content p ul li {
  font-family: "Source Sans 3", sans-serif;
  font-size: 16px;
  margin-bottom: 10px;
  color: #555;
}

.blog-page-content .back-button {
  display: block;
  max-width: 220px;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #6a7422;
  border-radius: 7px;
  color: #fff;
  border: none;
  cursor: pointer;
  text-align: center;
  /* align-self: flex-start; */

}

.blog-page-content .sidebar h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  color: #333;
  padding: 20px;
  align-self: flex-start;
}

.blog-page-content .featured-posts {
  list-style-type: none;
  padding: 0;
}

.blog-page-content .featured-posts li {
  font-family: "Source Sans 3", sans-serif;
  font-size: 16px;
  margin-bottom: 20px;
  display: flex;
}

.blog-page-content .featured-posts li img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.blog-page-content .featured-posts li a {
  text-decoration: none;
  color: #000;
  flex-grow: 1;
}

.blog-page-content .featured-posts li a:hover {
  text-decoration: underline;
}

.blog-page-content .explore-button {
  display: block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #6a7422;
  color: #fff;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  text-align: center;
}

.blog-page-content .sidebar hr {
  border: none;
  height: 1px;
  width: 90%;
  background-color: #cccccc;
  margin: 20px 0;
}

@media (max-width: 995px) {
  .blog-page-content .main-content,
  .blog-page-content .sidebar {
    flex: 1 1 100%;
  }

  /* .blog-page-content p img{
      width: 200px;
      height: 280px;
  } */

  .blog-page-content .main-content {
    order: 2;
  }

  .blog-page-content .sidebar {
    order: 1;
  }

  .blog-page-content .icon-container {
    text-align: center;
  }

  .blog-page-content .back-button {
    align-self: center;
  }
}


/* Brand Section Styles */
.brand-section {
  padding: 20px;
  /* background-color: #f8f8f8; */
  background-color: #ffffff;
  text-align: center;
  margin: 40px auto;
  max-width: 1200px;
}

.brand-section h2 {
  margin-bottom: 20px;
  font-size: 24px;
  /* color: #333; */
  text-transform: capitalize;
}

.brand-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.brand-item {
  flex: 1 1 calc(25% - 20px); /* Flex grow, flex shrink, flex basis */
  max-width: calc(25% - 20px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand-item img {
  max-width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.brand-item img:hover {
  transform: scale(1.1);
}

/* Responsive Styles */
@media (max-width: 768px) {
  .brand-item {
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .brand-item {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* CTA Section Styles */
.cta-section {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-color: #6a7422; /* Match the background color */
  color: #ffffff; /* Text color */
  text-align: center;
  padding: 40px 20px;
  position: relative;
  border-radius: 20px; /* Rounded corners */
  overflow: hidden;
  max-width: 800px;
  /* max-height: 50px; */
  margin: 30px auto;
}

/* Circle Elements */
@media (min-width: 480px) {
  .cta-section::before,
  .cta-section::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3); /* Adjust the shade */
  }

  .cta-section::before {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
  }

  .cta-section::after {
    width: 150px;
    height: 150px;
    top: -50px;
    right: -50px;
  }
}

/* CTA Content Styles */
.cta-content {
  position: relative;
  z-index: 1;
}

.cta-content h2 {
  font-size: 28px;
  margin-bottom: 10px;
  font-weight: bold;
}

.cta-content p {
  font-size: 18px;
  margin-bottom: 20px;
  /* font-weight: bold; */
}

.cta-button {
  background-color: #ffffff; /* Button background color */
  color: #6a7422; /* Button text color */
  border: 2px solid #fff;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  text-decoration: none;
}
.cta-button:link,
.cta-button:active {
  text-decoration: none;
  color: #6a7422;
  font-weight: bold;
}

.cta-button:hover {
  background-color: #6a7422;
  color: #fff;
  border: 2px solid #fff;
 
}

/* Responsive Styles */
@media (max-width: 480px) {
  .cta-section {
    padding: 20px;
    margin: 30px 20px;
  }
  .cta-content h2 {
    font-size: 20px;
  }

  .cta-content p {
    font-size: 16px;
  }

  .cta-button {
    font-size: 14px;
    padding: 8px 16px;
  }
}


/* end */
#about-overview-container #header-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 286px;
    background: #6E6E6E url(/media/images/about-overview-header.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#realwares-mission {
    margin-top: 45px;
}

#realwares-mission a {
    color: #707070;
}

#about-overview-container .left-col h3 {
    font-family:  OpenSansBold;
    font-size: 24px;
    color: #4c4c4c;
    text-align: left;
    margin-top: 0px;
}

#about-overview-container .right-col p, #about-overview-container #num-list ol li {
    font-family:  OpenSansRegular;
    font-size: 18px;
    color: #5b5b5b;
    text-align: left;
}

#about-overview-container .right-col p {
    margin-bottom: 0px;
}

#about-overview-container #num-list ol li {
    margin-bottom: 20px;
    padding-left: 10px; 
}

#about-overview-container .right-col div, #about-overview-container #sas70 p {
    font-family:  GeorgiaItalic;
    font-size: 24px;
    color: #4c4c4c;
    text-align: left;
}

#sas70 {
    padding: 25px 0px; 
    margin: 0;
    border-top: 1px solid #989898;
    border-bottom: 1px solid #989898;
}

#about-overview-container ol {
    list-style-position: outside;
    padding-left: 20px;
}

#sas70 div {
    padding: 0px;
}

#technology-partners {
    padding-top: 65px;
}

#technology-partners img {
    max-width: 100%;
    height: auto; 
    margin-bottom: 20px;
}

#about-overview-container ol {
    list-style-position: outside;
    padding-left: 20px;
}


/* -------------------------------------------- *
 * 360 Approach
*/

#approach-360-container #header-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 286px;
    background: #6E6E6E url(/media/images/360-approach-header.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#approach-360-container #header-image h2 {
    font-family:  OpenSansRegular;
    font-size: 24px;
    color: white;
}

#approach-360-container #header-image h1 {
    padding-top: 75px;    
}

#main-container #real360-overview  {
    padding-top: 50px;
    padding-bottom: 50px;
}
/* 
#approach-360-container h3  {
    font-family:  OpenSansSemibold;
    font-size: 24px;
    color: #4d4d4d;
} */

#approach-360-container #help-desk-support, #approach-360-container #backup {
    background-color: #f0f0f0;
}

#approach-360-container #backup, #approach-360-container #realware-real  {
    padding-top: 50px;
    padding-bottom: 45px;
}

#approach-360-container #real360-overview {
    padding-top: 40px;
    padding-bottom: 45px;
}

#approach-360-container #help-desk-support {
    padding-top: 50px;
    padding-bottom: 30px;
}

.approach-360-container-p {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 18px;
    color: #5b5b5b;
    margin-bottom: 0px;
}

#approach-360-container #real360-overview ul {
    list-style-image: url(/media/images/ul-marker.png);
    padding-left: 20px;
}

#approach-360-container #real360-overview ul li {
    font-family: OpenSansSemibold;
    font-size: 18px;
    color: #5b5b5b;
    margin-bottom: 15px;
}

#approach-360-container .right-col {
    padding-right: 0px;
}

#help-desk-support .right-col {
    padding-right: 80px;
}

#backup .right-col{
    padding-right: 35px;
}


#realware-real span a  {
    text-decoration: underline;
    color: #337ab7;
    font-size: 18px;
}

#realware-real a {
    text-decoration: none;
    color: #5b5b5b;
    font-size: 18px;
}


/* -------------------------------------------- *
 * Services Total Commerce
*/

#services-total-commerce-container #header-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 286px;
    background: #6E6E6E url(/media/images/services_Total-Commerce-header.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#total-commerce-cms-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 286px;
    background: #6E6E6E url(/media/images/total-commerce-cms.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 35px;
}

#total-commerce-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 286px;
    background: #6E6E6E url(/media/images/total-commerce.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 60px;
}

#total-workflow-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 286px;
    background: #6E6E6E url(/media/images/total-commerce-workflow.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 60px;
}

#total-commerce-types {
    padding-top: 45px;
}

#services-total-commerce-container #total-commerce-types h3 {
    font-family:  OpenSansBold;
    font-size: 18px;
    color: #4c4c4c;
    margin-top: 20px;
}

#services-total-commerce-container #total-commerce-types p {
    font-family:  OpenSansRegular;
    font-size: 14px;
    color: #5b5b5b;
    padding-top: 0px; 
    padding-left: 10px;
    padding-right: 13px;
}

.total-commerce-ul {
    padding-top: 45px;
}

.total-commerce-ul h6 {
    padding-top: 0px; 
    font-family:  OpenSansBold;
    font-size: 18px;
    color: #5b5b5b;
    margin-top: 5px;
}

.total-commerce-ul ul {
    font-family:  OpenSansRegular;
    font-size: 18px;
    color: #5b5b5b;
    margin-top: 0px;
    padding-top: 0px;
    padding-left: 0px; 
    list-style: none;
    margin: 0px;
    line-height: 1.3;
}

.total-commerce-ul ul li {
    position: relative;
    margin-top: 5px;

}

.total-commerce-ul ul li:before {
    content: "-";
    position: absolute;
    left: -18px;
}

#services-total-commerce-container .div-wrapper {
    position: relative;
    height: 115px;
    margin-top: 45px;
}

#services-total-commerce-container .div-wrapper img {
    position: absolute;
    bottom: 0;
    display:block;
    left: 0;
    right: 0;
    margin: auto;
}

#services-total-commerce-container h2 {
    font-family:  OpenSansSemibold;
    font-size: 18px;
    color: white;
    padding-top: 45px;
    margin-top: 0px;
}

#services-total-commerce-container h3 {
    font-family:  OpenSansSemibold;
    font-size: 40px;
    color: white;
    margin-top: 10px;
}

#services-total-commerce-container h4 {
    font-family:  OpenSansBold;
    font-size: 24px;
    color: #4c4c4c;
    padding-top: 45px;
    margin-top: 0px;
}

#services-total-commerce-container #total-commerce-types h5 {
    font-family:  OpenSansRegular;
}

#services-total-commerce-container h5 {
    font-family:  OpenSansSemibold;
    font-size: 24px;
    color: #5b5b5b;
}

#services-total-commerce-container p {
    font-family:  OpenSansRegular;
    font-size: 18px;
    color: #5b5b5b;
    margin-top: 0px;
}

#services-total-commerce-container #header-image p {
    font-family:  OpenSansRegular;
    font-size: 24px;
    color: white;
    padding-top: 20px !important;
}

#services-total-commerce-container #header-image h1 {
    padding-top: 85px;
}

#total-workflow-container {
    margin-bottom: 45px;
}


#total-workflow-container .total-commerce-ul p {
    margin-bottom: 5px;
}

#brands {
    height: auto;
}

#brands img{
    vertical-align: bottom;
}

#strategy-ecommerce-container {
    margin-bottom: 65px;
}

/* -------------------------------------------- *
 * Services Strategy
*/

#services-strategy-container #header-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 286px;
    background: #6E6E6E url(/media/images/services_strategy-header.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#strategy-business {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 286px;
    background: #6E6E6E url(/media/images/strategy-business.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 50px;
}

#strategy-ecommerce {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 286px;
    background: #6E6E6E url(/media/images/strategy-ecommerce.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 30px;
}

#services-strategy-container #header-image p {
    font-family:  OpenSansRegular;
    font-size: 24px;
    color: white;
    padding-top: 15px;
}

#services-strategy-container #header-image h1 {
    
}

#services-strategy-container #header-image .col-lg-10 {
    padding: 0;
    padding-top: 15px;
}
#services-strategy-container .div-wrapper {
    position: relative;
    height: 100px;
    margin-top: 30px;
    margin-bottom: 20px;
}

#services-strategy-container .div-wrapper img {
    position: absolute;
    bottom: 0;
    display:block;
    left: 0;
    right: 0;
    margin: auto;
}

#strategy-types {
    padding-top: 40px;
}

#services-strategy-container  #header-image h1 
{
    padding-top: 75px;
}
#services-strategy-container #strategy-business-container p, #services-strategy-container #strategy-ecommerce-container p {
    margin-bottom: 20px;
}

#services-strategy-container #strategy-types h3 {
    font-family:  OpenSansBold;
    font-size: 18px;
    color: #4c4c4c;
}

#services-strategy-container #strategy-types p {
    font-family:  OpenSansRegular;
    font-size: 14px;
    color: #5b5b5b;
    padding-top: 0px; 
    padding-left: 10px;
    padding-right: 13px;
}

#services-strategy-container h5 {
    font-family:  OpenSansSemibold;
    font-size: 24px;
    color: #5b5b5b;
    line-height: 1.3;
}

.strategy-ul ul {
    list-style: none;
    padding-left: 0px;
    text-align: left;
    line-height: 2;
}

.strategy-ul ul li {
    font-family: OpenSansRegular;
    font-size: 18px;
    color: #5b5b5b;
    margin-top: -5px;
}

.strategy-ul ul div {
    margin: 5px 150px 10px 45px;
    font-family: OpenSansRegular;
    font-size: 14px;
    color: #4c4c4c;
    line-height: 1.5;
}

.strategy-ul h5 {
    margin-top: 55px;   
}

.toggle-btn {
/*    width: 14px;*/
    height: 14px;
    background-color: transparent;
    border-style:none;
    background: url(/media/images/ul-marker2.png) no-repeat left;
    margin-right: 15px;
    padding-left: 25px;
    font-family: OpenSansRegular;
    font-size: 18px;
    color: #5b5b5b;
    text-decoration: none;
}

.toggle-btn:hover, .toggle-btn:active, .toggle-btn:visited, .toggle-btn:link {
    text-decoration: none;
    color: #5b5b5b;
}

#services-strategy-container h2 {
    font-family:  OpenSansSemibold;
    font-size: 18px;
    color: white;
    padding-top: 45px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#services-strategy-container h3 {
    font-family:  OpenSansSemibold;
    font-size: 40px;
    color: white;
    margin-top: 5px;
}

#services-strategy-container h4 {
    font-family:  OpenSansBold;
    font-size: 24px;
    color: #4c4c4c;
    padding-top: 45px;
    margin-top: 0px;
}

#services-strategy-container p {
    font-family:  OpenSansRegular;
    font-size: 18px;
    color: #5b5b5b;
    padding-top: 45px;
    margin-top: 0px;
}


/* -------------------------------------------- *
 * Services Develop
*/

#services-develop-container #header-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 286px;
    background: #6E6E6E url(/media/images/services_develop-header.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#development-dedicated-teams {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 286px;
    background: #6E6E6E url(/media/images/development-dedicated-teams.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 60px;
}

#development-custom {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 286px;
    background: #6E6E6E url(/media/images/development-custom.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 60px;
}

#development-continuous {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 286px;
    background: #6E6E6E url(/media/images/development-continuous.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 60px;
}

#develop-types {
    padding-top: 65px;
}

#services-develop-container #develop-types h3 {
    font-family:  OpenSansBold;
    font-size: 18px;
    color: #4c4c4c;
    margin-top: 20px;
}

#services-develop-container #develop-types p {
    font-family:  OpenSansRegular;
    font-size: 14px;
    color: #5b5b5b;
    padding-top: 0px; 
    padding-left: 10px;
    padding-right: 13px;
}

#services-develop-container #header-image h1 {
    font-family:  OpenSansSemibold;
    font-size: 40px;
    color: white;
    padding-top: 90px;
    padding-bottom: 20px;
}

#services-develop-container #header-image p {
    font-family:  OpenSansRegular;
    font-size: 24px;
    color: white;
    padding: 0px 200px;
}

#develop-types .div-wrapper {
    position: relative;
    height: 105px;
}

#develop-types .div-wrapper img {
    position: absolute;
    bottom: 0;
    display:block;
    left: 0;
    right: 0;
    margin: auto;
}

#development-continuous-container {
    margin-bottom: 45px;
}

#services-develop-container h2 {
    font-family:  OpenSansSemibold;
    font-size: 18px;
    color: white;
    padding-top: 45px;
    margin-top: 0px;
}

#services-develop-container h3 {
    font-family:  OpenSansSemibold;
    font-size: 40px;
    color: white;
    margin-top: 10px;
}

#services-develop-container h4 {
    font-family:  OpenSansBold;
    font-size: 24px;
    color: #4c4c4c;
    padding-top: 45px;
    margin-top: 0px;
}

#services-develop-container p {
    font-family:  OpenSansRegular;
    font-size: 18px;
    color: #5b5b5b;
    padding-top: 45px;
    margin-top: 0px;
}

/* -------------------------------------------- *
 * Services Design
*/

#services-design-container #header-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 286px;
    background: #6E6E6E url(/media/images/services_design-header.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#services-design-container #header-image .col-lg-10 {
    padding: 10px 0px;    
}

#services-design-container #header-image h1 {
    font-family:  OpenSansSemibold;
    font-size: 40px;
    color: white;
    padding-top: 65px;
    margin: 0 !important;
}

#design-ui-design {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 286px;
    background: #6E6E6E url(/media/images/design-ui-design.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 35px;
    margin-bottom: 45px;
}

#design-user-experience {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 286px;
    background: #6E6E6E url(/media/images/design-user-experience.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 75px;
    margin-bottom: 45px;
}

#design-responsive-design {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 286px;
    background: #6E6E6E url(/media/images/design-responsive-design.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 65px;
    margin-bottom: 45px;
}

#design-wireframing {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 286px;
    background: #6E6E6E url(/media/images/design-wireframing.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 65px;
    margin-bottom: 45px;
}

#design-types {
    padding-top: 75px;
}

#services-design-container #design-types h3 {
    font-family:  OpenSansBold;
    font-size: 18px;
    color: #4c4c4c;
    margin-top: 30px;
}

#services-design-container #design-types p {
    font-family:  OpenSansRegular;
    font-size: 14px;
    color: #5b5b5b;
    padding-top: 0px;
    margin-bottom: 30px;
}

#design-types .div-wrapper {
    position: relative;
    height: 105px;
}

#design-types .div-wrapper img {
    position: absolute;
    bottom: 0;
    display:block;
    left: 0;
    right: 0;
    margin: auto;
}

#services-design-container h2 {
    font-family:  OpenSansSemibold;
    font-size: 18px;
    color: white;
    margin-top: 0px;
    padding-top: 45px;
}

#services-design-container h3 {
    font-family:  OpenSansSemibold;
    font-size: 40px;
    color: white;
    margin-top: 10px;
}

#services-design-container h4 {
    font-family:  OpenSansBold;
    font-size: 24px;
    color: #4c4c4c;
    margin-top: 0px;
}

#wireframing-container {
    margin-bottom: 45px;
}

#dedicated-teams-ul ul, #ui-design-ul ul {
    font-family:  OpenSansRegular;
    font-size: 18px;
    color: #5b5b5b;
    margin-top: 0px;
    padding-top: 0px;
    padding-left: 0px; 
    list-style: none;
    margin: 0px;
}

#dedicated-teams-ul ul li, #ui-design-ul ul li {
    position: relative;
    margin-top: 10px;
}

#ui-design-ul ul li {
    line-height: 1.3;    
}

#dedicated-teams-ul ul li:before, #ui-design-ul ul li:before {
    content:  "-";
    position: absolute;
    left:     -18px;
}
#dedicated-teams-ul ul>li>ol >li:before, #ui-design-ul ul>li>ol>li:before {
    content:  "";
}


#design-ui-container p, #design-user-container p,  #design-responsive-container p, #wireframing-container p {
    font-family:  OpenSansRegular;
    font-size: 18px;
    color: #5b5b5b;
    margin-top: 0px;
     line-height: 1.3;
    margin-bottom: 0px;
}


/* -------------------------------------------- *
 * Careers
*/

#careers-container #header-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 286px;
    background: #6E6E6E url(/media/images/careers-header.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#careers-container #header-image h1 {
    font-family: OpenSansSemibold;
    font-size: 40px;
    color: white;
    padding-top: 110px;
    margin-top: 0px;
}

/* #careers-container h3 {
    font-family: OpenSansSemibold;
    font-size: 18px;
    color: #5b5b5b;
} */

#careers-content ul {
    list-style-image: url(/media/images/careers-ul-marker.png);
    padding-left: 20px;
    text-align: left;
    line-height: 2;
}

#careers-content ul li {
    font-family: OpenSansRegular;
    font-size: 18px;
    color: #5b5b5b;
    padding-left: 10px;
}

#careers-content p {
    padding-right: 25px;
    font-family: OpenSansRegular;
    font-size: 16px;
    color: #5b5b5b;
}

#careers-content h4 {
    font-family: OpenSansSemibold;
    font-size: 18px;
    color: #8fbc2d;
    margin-top: 20px;
    margin-bottom: 5px;
}

#careers-content h2 {
    font-family: OpenSansBold;
    font-size: 24px;
    color: #4c4c4c;
    margin-top: 0px;
    margin-bottom: 20px;
}

#careers-content .button {
    margin-top: 15px;
    font-family:  OpenSansBold;
    font-size: 18px;
    color: white;
    background-color: #8fbc2d;
    border-radius: 8px;
    border: 2px solid #8fbc2d;
    padding: 8px 70px;
}

#sbmt-btn:hover {
    background-color: white;
    opacity: 0.8;
    color: #8fbc2d;
}

#careers-content .button:hover {
    background-color: white;
    opacity: 0.8;
    color: #8fbc2d;
    text-decoration: none;
    text-shadow: none;
}

.apply-btn {
    margin-top: 35px;
    margin-left: 0px;
    margin-bottom: 45px;
}
#careers-container input[type="file"] {
    display: none;
}

#comment-group {
    margin-top: -25px;
}

#uploadFile {
    height: 34px; 
    width: 92%;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    background-color: transparent;
    border-radius: 4px;
    padding-left: 10px;
}

#sbmt-btn {
    margin-top: 30px;
    font-family:  OpenSansBold;
    font-size: 18px;
    color: white;
    background-color: #8fbc2d;
    border-radius: 8px;
    border: 2px solid #8fbc2d;
    width: 220px;
    height: 55px;
    margin-left: 0px;
}

#apply-for-job label {
    font-family:  OpenSansRegular;
    font-size: 18px;
    color: #5b5b5b;
    font-weight: 100;
}

#web-design {
    background-color: #f0f0f0;
}

#calendly-widget {
    height: 100%;
    min-height: 780px;
}

#general-manager {
    padding-top: 30px;
    padding-bottom: 25px;
}

#web-design {
    padding: 40px 0px;
}

#apply-for-job{
    margin: 65px 0px 45px 0px;
}

#apply-for-job h2 {
    font-family:  OpenSansBold;
    font-size: 24px;
    color: #4c4c4c;
}



/* -------------------------------------------- *
 * Management
*/

#management-container #header-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 286px;
    background: #6E6E6E url(/media/images/management-header.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#leadership-team h2, #management h2{
    font-family:  OpenSansSemibold;
    font-size: 40px;
    color: #4c4c4c;
    text-align: center;
    margin: 30px 0px 40px 0px;
}

#leadership-team h2{
    margin-top: 60px;
}

#leadership-team h3, #management h3{
    font-family:  OpenSansSemibold;
    font-size: 24px;
    color: #4c4c4c;
    text-align: left;
    margin: 0;
}

#management img, .img-wrapper img{
    margin-bottom: 60px;
}

#management {
    margin-bottom: 30px;
}

.contact-links {
    margin-top: 10px;
}

.contact-links img {
    padding-bottom: 6px;
    padding-right: 4px;
}

.job-post {
    font-family:  OpenSansSemibold;
    font-size: 14px;
    color: #8d8d8d;
    text-align: left;
    margin: 10px 0px;
}

.extra-info {
    font-family:  OpenSansRegular;
    font-size: 14px;
    color: #4c4c4c;
    text-align: left;
    padding-top: 0;
    padding-right: 15px;
}

/* -------------------------------------------- *
 * Slider1 and Slider2
*/

#carousel-1, #carousel-2 {
    max-height: 675px;
}

#myCarousel, #myCarousel2 {
    max-height: 675px;
}

#carousel-1 img{
    max-height: 675px;
    width: 100%;
}

#carousel-2 img{
    max-height: 618px;
    width: 100%;
}

.carousel-control.left, .carousel-control.right {
  filter: progid: none !important;
  filter:none !important;
  background-image:none;
 }

.carousel-caption {
    position: absolute;
    top: 8%;
    right: 10%;
    bottom: 0;
    left: 10%;
    z-index: 10;
    padding-top: 0px;
}

#carousel-1 .carousel-caption .button {
    margin-top: 20px;
    font-family:  OpenSansBold;
    font-size: 18px;
    color: white;
    background-color: #8fbc2d;
    border-radius: 8px;
    border: 2px solid #8fbc2d;
    padding: 15px 40px;
    text-shadow: none;
} 

#carousel-2 .carousel-caption .button {
    margin-top: 40px;
    font-family:  OpenSansBold;
    font-size: 18px;
    color: white;
    background-color: #8fbc2d;
    border-radius: 8px;
    border: 2px solid #8fbc2d;
    padding: 15px 70px;
}

.slider-2-btn {
    margin-top: 55px;
}

#slider-1-btn {
    margin-top: 45px;
}

#carousel-1 .carousel-caption .button:hover, #carousel-2 .carousel-caption .button:hover {
    background-color: transparent;
    opacity: 0.8;
    color: #8fbc2d;
    text-decoration: none;
    text-shadow: none;
}

#carousel-1 .carousel-caption h3 {
    font-family:  OpenSansSemibold;
    font-size: 40px;
    color: #4c4c4c;
    text-shadow: none;
    top: 45%;
    padding-left: 30px;
}

#carousel-2 .carousel-caption h3 {
    font-family:  OpenSansSemibold;
    font-size: 40px;
    color: #4c4c4c;
    text-shadow: none;
}

#carousel-1 .carousel-caption p {
    font-family:  OpenSansRegular;
    font-size: 14px;
    color: #5b5b5b;
    text-shadow: none;
    padding-top: 0px !important;
}

#carousel-2 .carousel-caption p {
    font-family:  OpenSansLight;
    font-size: 24px;
    color: black;
    text-shadow: none;
    padding: 0px;
}

#carousel-2 .carousel-caption h4 {
    font-family:  OpenSansSemibold;
    font-size: 14px; 
    text-shadow: none;
    color: black;
}

#carousel-2 .carousel-caption strong {
    font-family:  OpenSansBold;
    font-size: 14px; 
    text-shadow: none;
    color: black;
}

#carousel-1 .carousel-caption img {
    max-width: 147px;
    height: auto;
    margin-bottom: 20px;
}

#carousel-2 .carousel-caption img {
    max-width: 147px;
    height: auto;
    padding: 40px 0px 20px 0px;
}

#carousel-1 .carousel-caption #info-row {
    padding-top: 60px;
}

#testimonial-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.5rem;
    padding-bottom: 0;
    min-height: 500px;
}

#testimonialCarousel {
    width: 90%;
}
  
.testimonials {
    display: flex;
    width: 90%;
    align-items: center;
    justify-content: space-between;
}
  
  #testimonial-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  
  #testimonial-content-header {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 44px;
    color: #0b061e;
  }
  
  #vector-image {
    width: 79px;
    height: 52px;
    color: #eae6fb;
  }
  
  #content-first-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 40px;
    color: #6a7422;
    text-align: center;
    width: 70%;
  }
  
  #testimonial-content-text {
    width: 75%;
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    color: #47454f;
  }
  
  #genesis-logo {
    width: 100px;
    height: 34px;
  }
  
  #president {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #47454f;
  }
  
  #president-text {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #47454f;
    margin-top: -15px;
  }

  #carousel-link {
    width: 40px;
    height: 40px;
    top: 50%;
    bottom: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .carousel-control {
    /* position: absolute; */
    top: 50%;
    bottom: 50%;
    width: 40px;
    height: 40px;
    background-color: #dedef1;
    border-radius: 50%;
    z-index: 1;
    text-decoration: none;
    color: white;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
  }

  .carousel-span {
    margin: 0;
    padding: 0;
    text-align: center;
  }

  .carousel-inner {
      height: 100%;
  }

  .carousel-control:hover {
    background-color: #7474c1;
  }

  .glyphicon {
    font-size: 20px;
    margin: 0;
  }

  #testimonial-item {
    height: 100%;
    min-height: 500px;
  }

  .item {
      margin: 0;
      padding: 0;
      background-color: #fff;
  }

/* -------------------------------------------- *
 * Real:360
*/

#real-360 .button {
    background-color: transparent;
    border-color: transparent;
}
 
#real-360 div {
/*    padding-bottom: 60px;*/
}

#help-desk-support {
    padding-top: 5px;
}

#main-container #help-desk-support, #main-container #realware-real, #main-container #backup {
    margin-top: 35px;    
}

#real-360 h2 {
    font-family:  OpenSansSemibold;
    color: #4c4c4c;
    text-align: center;
    padding: 0px;
    margin-top: 70px;
    font-size: 40px;
}

#real-360 h3 {
    font-family:  OpenSansBold;
    color: #4c4c4c;
    text-align: center;
    padding: 0px;
    font-size: 18px;
    margin-bottom: 0px;
}

#real-360-text {
    font-family:  OpenSansRegular !important;
    color: #5b5b5b !important;
    font-size: 18px !important;
    margin-top: 10px;
}

#backup {
    padding-top: 7px;
}

#real-360 {
    text-align: center;
    margin-bottom: 60px;
}

#real-360 h4 {
    font-family:  OpenSansBold;
    color: #4c4c4c;
    font-size: 18px;
    margin: 25px 0 10px 0;
}

#real-360 p {
    font-family:  OpenSansRegular;
    color: #4c4c4c;
    font-size: 14px;
    margin-bottom: 8px;
}

#title-text {
    padding: 0px 107px 40px 107px;
}


/* -------------------------------------------- *
 * Call (Let`s talk)
*/
#main-container #call-number {
    padding: 60px 0px;
}

#call-number {
    color: white !important;
    padding: 85px 0px 230px 0px;
    height: 290px;
    background-color: #8fbc2d;
    text-align: center;
}

#call-number a {
    text-decoration: none;
    color: white !important;
}

#call-number h2 {
    font-family:  OpenSansBold;
    font-size: 40px;
    margin-top: 0px;
    padding-top: 0;
    margin-bottom: 0px;
}

#call-number h2 a {
    letter-spacing: 2px;
}

#call-number p {
    font-family:  OpenSansLight;
    font-size: 24px !important;
    color: white;
    padding-top: 0px !important;
}

#call-number .button {
    margin-top: 20px;
    font-family:  OpenSansBold;
    font-size: 14px;
    color: white;
    background-color: transparent;
    border-radius: 8px;
    border: 2px solid;
    width: 200px;
    height: 51px;
    padding: 15px 60px;
}

#call-number .button:hover {
    background-color: white;
    color: #8fbc2d !important;
    text-decoration: none;
    border-color: white;
}

#call-number-btn {
    margin-top: 45px;
}
/* -------------------------------------------- *
 * Footer
*/

#footer {
    padding-top: 50px;
    background-color: #323232;
    line-height: 1.5;
}

#footer div, #footer a{
    color: #9d9d9d;
}


#footer ul {
    padding-left: 0px;    
}

#footer ul li {
    list-style: none;
}

#footer a, #our-office-links div, #contact-links div {
    font-family:  OpenSansRegular;
    font-size: 14px;
}

#footer h4 {
    font-family:  OpenSansSemibold;
    font-size: 18px;
    color: white;
    padding-top: 0px;
    margin-bottom: 10px
}

#footer a {
    line-height: 0px;
/*    display: inline-block; */
}

#footer a:hover {
    color: #8fbc2d;
    text-decoration: none;
}

#contact-links {
    padding-left: 45px !important;
}

#contact-links img {
    margin-top: 20px;
    margin-bottom: 30px;
}

#our-office-links div, #contact-links div {
    
}

#contact-links img:hover {
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
} 

#footer-sitemap {
    border-top: 1px solid #535353;
    padding: 20px 0px;
    vertical-align: middle;
}

#footer-sitemap p {
    font-family:  OpenSansRegular;
    font-size: 14px;
    color: #adadad;
}



@media only screen and (max-width: 1300px), only screen and (max-device-width: 1300px) { 
    
    #carousel-2 .carousel-caption p {
        font-size: 20px;
    }

     #testimonial-item {
      height: 100%;
    }

}

@media only screen and (max-width: 1200px), only screen and (max-device-width: 1200px) { 

    #main-nav {
        width: 90%;
    }

    #nav-list {
        gap: 2rem;
        font-size: 17px;
    }

    #contact-nav {
        padding: 4px 0;
        width: 180px;
        font-weight: 600;
        font-size: 15px;
    }
  
    #menu-links li {
        display: inline-block;
        font-size: 16px;
        padding-left: 24px;
    }

    #contact-links {
        padding-left: 15px;
    }
    
    #services-links, #about-links, #approach-links, #our-office-links, #contact-links{
        height: 130px;
        margin-bottom: 20px;
    }
    
    #carousel-1 .carousel-caption h3 {
        font-size: 24px;
        margin-top: 0px;
    }
    
    #carousel-1 .carousel-caption #info-row {
        padding-top: 30px;
    }
    
    #carousel-2 .carousel-caption img {
        padding: 10px;
    }
    
    #carousel-2 .carousel-caption p {
        font-size: 16px;
    }
    
    #management-container .img-wrapper img {
        max-width: 100%;
        height: auto;
    }
    
    #leadership-team h2 {
        margin-top: 20px !important;
    }
    
    #management-container #header-image {
        margin-bottom: 30px;
    }
    
    #careers-content ul li {
        font-size: 16px;
    }
    
    #contact-links {
        padding-left: 15px !important;
    }
    
    #services div {
        margin-bottom: 40px;
    }
    
    #services {
        margin-bottom: 50px;
    }
}

@media only screen and (max-width: 992px), only screen and (max-device-width: 992px) { 
    /* #site-logo {
        height: 50px;
        width: 90px;
    }

    #nav-list {
        gap: 1.5rem;
        font-weight: 400;
        font-size: 16px;
      }
      
      #contact-nav {
        padding: 2px 0;
        width: 160px;
        font-weight: 500;
        font-size: 14px;
      } */

    #site-logo {
        height: 50px;
        width: 90px;
    }

    #main-nav {
        justify-content: space-between;
        align-items: center;
    }

    #nav-list {
        position: fixed;
        display: flex;
        flex-direction: column;
        width: 90%;
        height: fit-content;
        margin-top: -100%;
        background-color: #fff;
        align-items: flex-start;
        justify-content: space-between;
        bottom: 0;
        padding: 10px;
        top: 0;
    }
      
    #contact-nav {
        display: none;
    }

    #menu-burger {
        display: block;
    }

    #testimonial-section {
        height: 650px;
    }

    #testimonial-item {
      height: 650px;
    }

    .cta {
        width: 80%;
    }

    .cta-content h3 {
        font-size: 40px;
        line-height: 46px;
    }
      
    .cta-p {
        font-size: 22px;
        line-height: 25px;
    }

    #footer-list-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }
  
    #menu-links li {
        display: inline-block;
/*        font-size: 14px !important;*/
        font-size: 14px;
        padding-left: 16px;
    }
    
    .navbar-nav > li > a {
        padding: 0;
    }
    
    #real-360-text {
        padding: 0;
    }
    
    #header-txt h1 {
        font-size: 30px;
    }
    
    #header-txt h3 {
        font-size: 20px;
    }
    
    #carousel-1 .carousel-caption h3 {
        font-size: 24px;
    }
    
    #carousel-1 .carousel-caption p {
        font-size: 12px;
    }
    
    #carousel-1 .carousel-caption #info-row {
        padding-top: 0px;
    }
    
    #carousel-1 .carousel-caption .button {
        margin-top: 0px;
        font-size: 14px;
        width: 140px;
        height: 30px;
        border-radius: 5px;
    } 
    
    #carousel-2 .carousel-caption h3 {
        font-size: 28px;
        margin-top: 0px;
    }
    
    #carousel-2 .carousel-caption p {
        font-size: 14px;
    }
    
    .slider-2-btn {
        margin-top: 20px;
    }
    
     #carousel-1 .carousel-caption .button {
        padding: 10px 40px;
    }
    
    #carousel-2 .carousel-caption .button {
        padding: 10px 40px;
    }
    
    #about-overview-container h3 {
      font-size: 14px;  
    }
    
    #about-overview-container #header-image p {
        padding: 10px 60px;
        font-size: 18px;
    }
    
     #about-overview-container #technology-partners {
        padding-top: 35px;
    }
    
    #comment-group {
        margin-top: 0px;
    }
}

@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
    
    #main-nav {
        justify-content: space-between;
        align-items: center;
    }

    #contact-nav {
        display: none;
    }

    #menu-burger {
        display: block;
    }

    .cta-content h3 {
        font-size: 36px;
        line-height: 40px;
    }
      
    .cta-p {
        font-size: 19px;
        line-height: 20px;
        text-align: center;
    }

    #footer-list-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
  
    
    #main-container #header-image {
       min-height: 710px;
    }
    
        
    #header-txt {
        margin-top: 160px;
    }
    
    .navbar {
        /* margin-bottom: 20px !important; */
    }
    
    .navbar-nav {
        margin: 0;    
    }
    
    #services div {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    #real-360 p {
        padding: 0 50px;
    }
    
    #title-text {
        padding: 20px 30px !important;
    }
    
    #menu-links li {
        display: block;
        font-size: 18px;
        margin-right: 15px;
        margin-top: 10px;
    }    
   
    #main-container .dropdown-menu li a {
        color: white !important;
    }
    
    #menu-links li:last-child {
        margin-bottom: 10px;
    }
    
    .dropdown-menu {
        border-radius: 0px;
        min-width: auto;
        padding: 0px 15px 5px 10px;
    }
    
    #header-txt{
        margin-top: 100px;    
    }
    
    #header-image p {
        font-size: 16px !important;
        padding: 50px !important;
    }
    
    #contact-phone {
        padding-top: 15px;
    }
    
    #carousel-1 .carousel-caption p, #carousel-1 .carousel-caption h3, #carousel-2 .carousel-caption img {
        display: none;
    }
    
    #carousel-1 .carousel-caption .button {
        font-size: 12px;
        border-radius: 3px;
        margin-top: 20px;
        padding: 4px 15px;
    } 
    
    #slider-1-btn {
        margin-top: 15px;    
    }
    
    #carousel-1 .carousel-caption img {
        padding-top: 30px;
    }
    
    #carousel-2 .carousel-caption h3 {
        font-size: 20px;
        margin-top: 20px;
    }
    
    #carousel-2 .carousel-caption p {
        font-size: 14px;
    }
    
    #carousel-2 .carousel-caption h4, .slider-2-btn {
        display: none;
    }
 
    #technology-partners, #develop-types {
        padding-top: 35px;
    }
    
    #about-overview-container .right-col p, #about-overview-container #num-list ol li, #about-overview-container .right-col div {
        font-size: 16px;
    }
    
    .contact-links {
        margin-bottom: 35px;    
    }
    
    #management-container .img-wrapper {
        text-align: center;
    }
    
    #management .img-wrapper img, .img-wrapper img {
        margin-bottom: 30px;
    }
    
    #management .extra-info {
        margin-bottom: 35px;
    }
    
    #design-ui-container p, #design-user-container p,  #design-responsive-container p, #wireframing-container p, #ui-design-ul ul li {
        font-size: 16px;
    }
    
    #ui-design-ul ul {
        padding-left: 15px;
    }
    
    .strategy-ul ul li {
        font-size: 16px;
    }
    
    .strategy-ul h5 {
        margin-top: 45px;
    }
    
    .strategy-ul ul div {
        margin-right: 50px;
    }
    
    #development-dedicated-teams-container p, #development-custom-container p, #development-continuous-container p  {
        font-size: 16px;
        padding-top: 20px !important;
    }
    
    #dedicated-teams-ul ul li {
        font-size: 16px;
    }
    
    #dedicated-teams-ul ul li {
        margin-left: 15px;
    }
    
    #careers-content ul li {
        font-size: 14px;
    }
    
    #leadership-team h2 {
        margin-top: 20px;
    }
    
    .total-commerce-ul ul li {
        margin-left: 15px;
    }
    
    #services-strategy-container p {
        padding-top: 20px;
        font-size: 16px;
    }
    
    #approach-360-container h3 {
        margin-bottom: 30px;
    }
    
    #help-desk-support .right-col {
        padding-right: 30px;
    }
    
    #develop-types .div-wrapper {
        margin-top: 40px;
    }
    
    .navbar-nav .open .dropdown-menu {
        margin-top: 0px !important;
    }
	
	.dropdown.open .dropdown-toggle:after {
		border-color: transparent;
		margin-top: 0;
	}
    
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px){ 

    #nav-list {
        position: fixed;
        display: flex;
        flex-direction: column;
        width: 90%;
        height: fit-content;
        margin-top: -110%;
        background-color: #fff;
        align-items: flex-start;
        justify-content: space-between;
        bottom: 0;
        padding: 10px;
        top: 0;
    }

    #testimonialCarousel {
        width: 95%;
      }

      #testimonial-item {
       /* height: 630px; */
       height: 100%;
       min-height: 610px;
     }
      
      .testimonials {
        width: 95%;
      }
      
      #testimonial-content {
        height: 100%;
        min-height: 610px;
        gap: 5px;
      }

      .item {
        height: 100%;
        min-height: 610px;
        margin: 0;
        padding: 0;
      }
      
      #testimonial-content-header {
        font-weight: 600;
        font-size: 34px;
      }
      
      #vector-image {
        width: 69px;
        height: 42px;
      }
      
      #content-first-text {
        font-weight: 500;
        font-size: 20px;
        line-height: 30px;
        width: 80%;
      }
      
      #testimonial-content-text {
        width: 90%;
        font-weight: 400;
        font-size: 13px;
      }
      
      
      #president {
        font-size: 16px;
      }
    .cta {
        height: 250px;
        padding: 0 5px;
    }

    .cta-content h3 {
        font-size: 25px;
        line-height: 34px;
        text-align: center
    }
      
    .cta-p {
        font-size: 15px;
    }

    .cta-button {
        display: none;
    }

    .contact {
        height: 35px;
        width: 140px;
        margin-top: 10px;
      }

    #footer-list-container {
        display: flex;
        flex-direction: column;
    }
      
    .list-header {
        height: 25px;
        font-weight: 700;
        font-size: 18px;
        line-height: 25px;
        margin-bottom: 3px;
    }
      
    #footer-bottom {
        display: flex;
        flex-direction: column;
    }
    
    #main-container #header-image {
        min-height: 630px;
    }
        
    #header-txt, #down-arrow {
        margin-top: 130px;
    }
    
    #header-txt h1 {
        font-size: 22px;
    }
    
    #header-txt h3 {
        font-size: 16px !important;
    }
    
    #call-number h2 {
        font-size: 24px !important;
        letter-spacing: 1 !important;
    }
    
    #carousel-1 .carousel-caption img {
        margin: 5px;
    }
    
    #real-360 p {
        padding: 0px;
        font-size: 14px !important;
    }
    
    #carousel-2 .carousel-caption h3 {
        font-size: 12px;
        margin-bottom: 5px;
        margin-top: 0px;
    }
    
    #carousel-2 .carousel-caption p {
        font-size: 10px;
    }
    
    #footer-sitemap {
        margin-top: 30px;
    }
    
    #contact-phone a {
        font-size: 18px;
    }
    
    #footer-sitemap a {
        display: inline-block;
        padding: 0px !important;
    }
    
    #contact-links {
        margin-top: 10px;
    }
    
    .hide-480 {
        display: none;
    }
    
    #about-overview-container .right-col p, #num-list ol li {
        font-size: 14px;
    }
    
    #design-ui-container p, #design-user-container p,  #design-responsive-container p, #wireframing-container p, #ui-design-ul ul li {
        font-size: 14px;
    }
    
    .strategy-ul ul li {
        font-size: 14px;
    }
    
    .strategy-ul h5 {
        margin-top: 25px;
    }
    
    #development-dedicated-teams-container p, #development-custom-container p, #development-continuous-container p, #dedicated-teams-ul ul li {
        font-size: 14px;
    }
    
    
    #sbmt-btn, #careers-content button {
        font-size: 14px;
        width: 180px;
        height: 40px;
    }
    
    #sbmt-btn, #careers-content button {
        font-size: 14px;
        width: 180px;
        height: 45px;
    }
    
    #call-number .button {
        font-size: 16px;
        padding: 12px 40px;
    }
    
    #services-total-commerce-container h3 {
        font-size: 30px;
    }
    
    #services-total-commerce-container h4 {
        margin-bottom: 0px;
        padding-top: 35px;
    }
    
    #services-total-commerce-container p, .total-commerce-ul ul li, #approach-360-container p, #approach-360-container #real360-overview ul li {
        font-size: 14px;
    }
    
    .total-commerce-ul {
        padding-top: 25px;
    }
    
    #total-workflow-container, #strategy-ecommerce-container {
        margin-bottom: 30px;
    }
    
    #total-commerce-types {
        padding-top: 45px;
    }
    
    #management-container h2 {
        font-size: 32px;
    }
    
    #careers-content .button {
        padding: 10px 50px;
    }
    
    #services-strategy-container h5 {
        font-size: 20px;
    }

    #design-types .div-wrapper {
        margin-top: 20px;
    }
    
    #design-types {
        padding-top: 40px;
    }
    
    #real-360 h2 {
        margin-top: 20px;
    }
    
    #real-360 h2, #services h2{
        font-size: 32px !important;
    }
    
    #real-360 h3 {
        font-size: 20px !important;
    }
    
    #main-container #help-desk-support, #main-container #realware-real, #main-container #backup {
        margin-bottom: 20px;    
    }
	
}
.navbar-nav li:hover > ul.dropdown-menu {
    display: block!important;
}
.dropdown-submenu {
    position:relative!important;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top:-6px;
}

/* rotate caret on hover */
.dropdown-menu > li > a:hover:after {
    text-decoration: underline;
    transform: rotate(-90deg);
} 
.dropdown-menu {
    border-radius: 0px!important;
    border-top: 3px solid #8fbc2d !important;
    min-width: 300px !important;
    margin-top: 0 !important;
    padding: 15px 15px 6px !important;
    /* margin: 10px !important; */
    margin-left: 0px !important;
    /* top: 20px !important; */
}
.dropdown-menu li a {
    color:#000!important;
}

.arrow-btn {
		background-color: white;
		/* Set background */
		border: 2px solid #cccccc;
		/* Light border */
		color: #333333;
		/* Dark text color */
		padding: 10px;
		border-radius: 50%;
		width: 50px;
		height: 50px;
		text-align: center;
		font-size: 24px;
		line-height: 30px;
		cursor: pointer;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		/* Light shadow */
	}

	.arrow-btn:hover {
		background-color: #f0f0f0;
		/* Change background on hover */
	}

	#custom-arrow {
		position: absolute;
		/* You can position it outside the container */
		right: 15%;
		top: 7%;
		transform: translateY(-50%);
		/* Center vertically */
		font-size: 30px;
		/* Larger size for emphasis */
		background-color: transparent;
		/* No background */
		color: #333;
		/* Icon color */
	}