/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  color: #2a2a2a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #03a4ed;
  color: #fff;
}

::-moz-selection {
  background: #03a4ed;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 20px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 10px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 10px;
  }
}

.page-section {
  margin-top: 100px;
}

.section-heading h2 {
  font-size: 30px;
  text-transform: capitalize;
  color: #2a2a2a;
  font-weight: 700;
  letter-spacing: 0.25px;
  position: relative;
  z-index: 2;
  line-height: 44px;
}

.section-heading h2 em {
  font-style: normal;
  color: #03a4ed;
}

.section-heading h2 span {
  color: #fe3f40;   /*this color is for each section have red in the heading*/
}

.main-blue-button a {
  display: inline-block;
  background-color: #7df9ff;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 20px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-red-button a {
  display: inline-block;
  background-color: #000000;
  font-size: 15px;
  font-weight: 400;
  color: #0e0101;
  text-transform: capitalize;
  padding: 12px 20px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-white-button a {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  color: #7df9ff;
  text-transform: capitalize;
  padding: 12px 20px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  background-color: #ffffff!important;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .main-nav .nav li:hover a {
  color: #000000!important; /*nav section on hover*/
}

.background-header .nav li a.active {
  color: #000000!important;
}

.header-area {
  background-color: #ffffff;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 100px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo h4 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    color: #03a4ed;
    line-height: 100px;
    float: left;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}


.background-header .main-nav .logo h4 {
  line-height: 80px;
}

.background-header .main-nav .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
  padding-left: 40px;
}

.header-area .main-nav .nav li:last-child a ,
.background-header .main-nav .nav li:last-child a {
  color: #ffffff !important;/*this is contact now btn*/
  padding: 0px 20px;
  font-weight: 400;
}

.header-area .main-nav .nav li:last-child a:hover,
.header-area .main-nav .nav li:last-child a.active {
  color: #ffffff !important;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: #2a2a2a;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li a {
  color: #2a2a2a;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #000000!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #47daed!important;/*on hover the nav section color*/
  opacity: 1;
}

.header-area .main-nav .nav li:last-child a:hover ,
.background-header .main-nav .nav li:last-child a:hover {
  background-color: #47daed;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #2a2a2a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #2a2a2a;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #fe3f40!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #fe3f40;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav .nav li:last-child  ,
  .background-header .main-nav .nav li:last-child {
    display: none;
  }
  .header-area .main-nav .nav li:nth-child(6),
  .background-header .main-nav .nav li:nth-child(6) {
    padding-right: 0px;
  }
}

@media (max-width: 767px) {
  .background-header .main-nav .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #47daed!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .background-header .nav {
    margin-top: 80px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #fe3f40!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}


@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@-webkit-keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

@keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #fff;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #47daed;
    border-radius: 50%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: dot 2.8s infinite;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    -webkit-animation: dots 2.8s infinite;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: #47daed;
    border-radius: 50%;
}



/* 
---------------------------------------------
HOME Style
--------------------------------------------- 
*/

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 50px 0px 50px 0px;
  position: relative;
  overflow: hidden;
}

.main-banner:after {
  content: '';
  background-image: url(../images/home-left.png);
  background-repeat: no-repeat;
  opacity: 0.3; 
  position: absolute;
  left: 0;
  top: 100px;
  width: 190px;
  height: 467px;
}

.main-banner:before {
  content: '';
  background-image: url(../images/home-right.png);
  opacity: 0.4;
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 100px;
  width: 98px;
  height: 290px;
}

.main-banner .left-content {
  margin-right: 45px;
}

/*welcome to ai*/
.main-banner .left-content h5 {
  text-transform: none;  
  font-size: 36px; 
  font-weight: 600; 
  color: #222; 
  letter-spacing: 0.7px; 
  text-align: center; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}


/* Media Queries for smaller screens */
@media only screen and (max-width: 1500px) {
  .main-banner .left-content h5 {
    font-size: 35px;
  }
}
@media only screen and (max-width: 1200px) {
  .main-banner .left-content h5 {
    font-size: 30px; 
  }
}

@media only screen and (max-width: 992px) {
  .main-banner .left-content h5 {
    font-size: 30px; /* Further reduce the font size for tablets */
    margin-top: 15px; /* Adjust top margin for smaller screens */
    margin-bottom: 15px; /* Adjust bottom margin */
  }
}

@media only screen and (max-width: 768px) {
  .main-banner .left-content h5 {
    font-size: 26px; /* Smaller font size for mobile devices */
    margin-top: 10px; /* Reduced margin for small screens */
    margin-bottom: 10px;
  }
}

@media only screen and (max-width: 480px) {
  .main-banner .left-content h5 {
    font-size: 22px; /* Further reduced font size for very small screens */
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

.main-banner .left-content h4 {
  font-size: 60px;
  font-weight: 600;
  color: #003366;
  line-height: 1.5;
  text-align: center;
  margin-top: 10px;
  letter-spacing: 0.5px;
  text-transform: none;
}

/* Media Queries for smaller screens */

/* For screen widths less than or equal to 1200px (Laptops) */
@media only screen and (max-width: 1200px) {
  .main-banner .left-content h4 {
    font-size: 50px; /* Slightly smaller font size */
    margin-top: 15px; /* Adjust margin for better spacing */
    margin-bottom: 15px; /* Adjust margin */
  }
}

/* For screen widths less than or equal to 992px (Tablets) */
@media only screen and (max-width: 992px) {
  .main-banner .left-content h4 {
    font-size: 40px; /* Reduce font size for tablets */
    margin-top: 10px; /* Adjust margin for smaller screens */
    margin-bottom: 10px; /* Adjust margin */
  }
}

/* For screen widths less than or equal to 768px (Small Tablets/Phones) */
@media only screen and (max-width: 768px) {
  .main-banner .left-content h4 {
    font-size: 32px; /* Smaller font size for small tablets and phones */
    margin-top: 8px; /* Further reduce the margin for small screens */
    margin-bottom: 8px; /* Further reduce the margin */
  }
}

/* For screen widths less than or equal to 480px (Mobile Phones) */
@media only screen and (max-width: 480px) {
  .main-banner .left-content h4 {
    font-size: 26px; /* Smallest font size for mobile phones */
    margin-top: 5px; /* Adjust margin for phones */
    margin-bottom: 5px; /* Adjust margin */
  }
}


/*headline home page*/
.main-banner .left-content p {
  font-size: 18px; 
  line-height: 1.8; /* Increase line height for better readability */
  color: #333333; 
  text-align: justify; /* Justify the text for even alignment */
  margin-top: 20px; /* Space above the paragraph */
  margin-bottom: 20px; /* Space below the paragraph */
  padding: 0 15px; /* Padding on the sides for better spacing */
  font-family: 'Arial', sans-serif; /* Choose a readable font family */
}

@media (max-width: 768px) {
  /* For smaller screens */
  .main-banner .left-content p {
    font-size: 16px;  /* Slightly smaller font size for mobile */
    line-height: 1.5;  /* Adjust line height for smaller screens */
    text-align: center; 
  }
}

@media (max-width: 480px) {
  /* For very small screens */
  .main-banner .left-content p {
    font-size: 15px;  /* Even smaller font size for very small devices */
    line-height: 1.4;
    text-align: justify;
    font-family: 'Arial', sans-serif; 
  }
}


/* Main Button Styling */
.main-button {
  font-size: 15px;
  font-weight: 500;
  padding: 12px 25px;
  border-radius: 23px;
  text-transform: capitalize;
  letter-spacing: 0.25px;
  outline: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  position: relative;
  justify-content: center;
}

/* INTRODUCTION */
/* General paragraph styling for the 'intro' paragraph */
#intro {
  font-size: 18px; /* Set the font size for readability */
  line-height: 1.8; /* Increase line height for better readability */
  color: #333333; /* Dark gray color for text */
  text-align: justify; /* Justify the text for even alignment */
  margin-top: 20px; /* Space above the paragraph */
  margin-bottom: 20px; /* Space below the paragraph */
  padding: 0 15px; /* Padding on the sides for better spacing */
  font-family: 'Arial', sans-serif; /* Choose a readable font family */
}

/* Styling for smaller screens (tablets and below) */
@media only screen and (max-width: 768px) {
  #intro {
    font-size: 16px; /* Adjust font size for smaller screens */
    line-height: 1.6; /* Adjust line height for mobile devices */
    padding: 0 10px; /* Adjust padding for smaller screens */
    text-align: center;
  }
}

/* Styling for very small screens (mobile phones) */
@media only screen and (max-width: 480px) {
  #intro {
    font-size: 13px; /* Further reduce font size for very small screens */
    line-height: 1.5; /* Adjust line height for mobile phones */
    padding: 0 8px; /* Slightly reduce padding for phones */
    text-align: justify;
  }
}



/* Get Started Today Button */
.get-started-btn {
  background: linear-gradient(90deg, #47daed, #03a4ed);
  color: #ffffff;
  box-shadow: 0px 4px 10px rgba(3, 164, 237, 0.4);
}

/* Hover Effects - Subtle Glow */
.get-started-btn:hover {
  transform: scale(1.05);
  box-shadow: 0px 0px 12px rgba(3, 164, 237, 0.6); /* Soft glow */
}

/* CTA Buttons Container - Center Alignment */
.cta-buttons {
  display: flex;
  justify-content: center; 
  align-items: center;
  gap: 15px; 
  flex-wrap: wrap; 
  margin-top: 20px;
}

/* General Button Styling */
.main-button {
  font-size: 15px;
  font-weight: 500;
  padding: 12px 25px;
  border-radius: 23px;
  text-transform: capitalize;
  letter-spacing: 0.25px;
  outline: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  min-width: 180px; /* Ensures uniform button width */
  text-align: center; /* Centers text inside the button */
}

.cta-buttons a{
  color: white;
}
/* Explore Our Services Button */
.explore-services-btn {
  background-color: #03a4ed;
  color: #ffffff;
}

.explore-services-btn:hover {
  background-color: #0288d1;
  transform: scale(1.05);
  box-shadow: 0px 4px 10px rgba(3, 164, 237, 0.3);
}

/* See Our Products Button */
.see-products-btn {
  background-color: #47daed;
  color: #ffffff;
}

.see-products-btn:hover {
  background-color: #32c1d8;
  transform: scale(1.05);
  box-shadow: 0px 4px 10px rgba(71, 218, 237, 0.3);
}

/* 
---------------------------------------------
SERVICES STYLE
--------------------------------------------- 
*/
  .about-us {
    background-image: url(../images/about-us.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 140px 0px 120px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

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

  #expertise-heading {
    font-size: 35px; 
    font-weight: 700; 
    color: #2c3e50; 
    text-align: center; 
    margin-bottom: 20px; 
    letter-spacing: 1px; 
    line-height: 1.4;
  }

  .services .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .services .col-lg-6 {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  .right-text {
    text-align: center;
  }

  .about-us .services .item .icon {
    float: left; 
    margin-right: 10px; 
  }

  .about-us .services .item .icon img {
    max-width: 10px; 
    height: auto; 
  }

  .about-us .services .item h4 {
    color: #ffffff; 
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
  }

  .about-us .services .item .right-text ul {
    list-style-type: disc; 
    padding-left: 20px; 
    margin-top: 10px; 
  }

  .about-us .services .item .right-text ul li {
    font-size: 15px; 
    color: #020000; 
    line-height: 1.6; 
    margin-bottom: 10px; 
  }

  .button-container {
    text-align: center;
    margin-top: 20px;
}

.service-contact {
    background-color: #2b5887; /* Blue color */
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    color: rgb(255, 255, 255);
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

.service-contact:hover {
    background-color: rgb(0, 0, 0); /* Darker blue */
}

/* Remove default link styles */
.service-contact a {
    text-decoration: none;
    color: rgb(255, 255, 255);
    display: block;
    width: 100%;
    height: 100%;
}

  @media (max-width: 768px) {
    .services .row {
      flex-direction: column;
      align-items: center;
    }
    .col-lg-6 {
      width: 100%;
      text-align: center;
    }
  }


/* 
---------------------------------------------
About Us Style
--------------------------------------------- 
*/
#about {
  margin-top: 50px;
  padding: 80px 0; 
}

.section-heading {
  text-align: center; 
  margin-bottom: 20px; 
}

.our-about {
  text-align: center; /* Centers all text inside the div */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px; 
  padding: 10px;
  background: #e5eceda0; 
  border-radius: 10px; 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
  .our-about {
    padding: 10px;
  }
  .about-values {
    padding-left: 10px;
  }
}

.our-about h4 {
  font-size: 22px;
  color: #47daed; 
  margin-bottom: 8px;
}

.our-about span {
  color: rgb(0, 0, 0); 
  display: block; 
  text-align: center;
  margin-top: 8px; 
}

.about-values {
  list-style-type: disc;
  padding-left: 20px;
  text-align: left;
}

.about-values li {
  font-size: 16px;
  margin-bottom: 8px; 
  line-height: 1.5; /* Improves readability */
  text-align: left;
}


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

.why-work-careers {
  list-style-type: disc; 
  padding-left: 30px; 
  margin-top: 10px; 
}

.why-work-careers li {
  font-size: 16px;
  line-height: 1.6; 
  color: #555; 
  margin-bottom: 8px; 
  text-align: left;
}

.icon {
  float: inline-start; 
  margin-right: 10px; 
}


/* Responsive Design */
@media (max-width: 768px) {
  .why-work-careers {
    padding-left: 20px; 
  }
}

.our-career {
  padding-top: 120px;
  margin-top: 0px;
}

.our-career .section-heading h2 em span {
  text-align: center;
  margin: 0px 90px 0px 90px;
  margin-bottom: 100px;
  position: relative;
  z-index: 1;
  color: #333; 
  font-size: 30px;
  margin-bottom: 20px; 
}

.our-career .item {
  position: relative;
  margin-bottom: 10px;
}

#apply-now {
  background:#2d4652;
  color: #ffffff;
  transition: all 0.3s ease-in-out;
}

#apply-now:hover {
  background: #47daed;
  transform: translateY(-2px);
}


.our-career .item:hover .hidden-content {
  top: -100px;
  opacity: 1;
  visibility: visible;
}

.our-career .item:hover .showed-content {
  top: 40px;
}

.our-career .hidden-content {
  background: #47daed;
  background: linear-gradient(90deg, #47daed, #03a4ed);
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  opacity: 0;
  top: 0;
  visibility: hidden;
  position: absolute;
  z-index: 2;
  transition: all 0.5s;
}

.our-career .hidden-content:after {
  width: 20px;
  height: 20px;
  position: absolute;
  background: #47daed;
  content: '';
  left: 50%;
  bottom: -8px;
  margin-left: -5px;
  transform: rotate(45deg);
  background: linear-gradient(90deg, #47daed, #03a4ed);
  z-index: -1;
}

.our-career .hidden-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
}

/* The grid system for rows and columns */
.row-item {
  display: flex;
  flex-wrap: wrap; 
  gap: 30px;
}

/* Each column (in a row) */
.col-lg-3, .col-sm-6 {
  flex: 1 1 calc(33.333% - 30px); 
  box-sizing: border-box;
}

/* Style for each item */
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Showed content (the box around the image) */
.our-career .showed-content {
  top: 0px;
  position: relative;
  z-index: 3;
  background-color: #fff;
  text-align: center;
  padding: 50px;
  border-radius: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.5s;
}

/* The image inside showed-content */
.our-career .showed-content img {
  max-width: 200px;
  width: 100%; /* Allow the image to scale within the container */
  height: auto;
}

/* For smaller screens, stack the items into 2 per row */
@media (max-width: 991px) {
  .col-lg-3 {
    flex: 1 1 calc(50% - 30px); /* 2 items per row on medium screens */
  }
}

/* For very small screens, stack all items into 1 per row */
@media (max-width: 575px) {
  .col-lg-3, .col-sm-6 {
    flex: 1 1 100%; /* 1 item per row on small screens */
  }
}


/* 
---------------------------------------------
Products Style
--------------------------------------------- 
*/

.our-blog {
  position: relative;
  margin-top: 20px;
  padding-top: 100px;
}

.our-blog .section-heading h2 {
  text-align: center;
}

.our-blog .top-dec {
  text-align: right;
  margin-top: -80px;
}

.our-blog .top-dec img {
  max-width: 250px;
}

.our-blog .left-image {
  position: relative;
}

.our-blog .left-image img {
  border-radius: 20px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}

.our-blog .left-image .info {
  position: relative;
}

.our-blog .left-image .info .inner-content {
  background-color: #ffffff;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 20px;
  margin-right: 55px;
  position: absolute;
  margin-top: -100px;
  padding: 30px;
}

.our-blog .left-image ul li {
  display: inline-block;
  font-size: 15px;
  color: #040000;
  font-weight: 300;
  margin-right: 20px;
}

.our-blog .left-image ul li:last-child {
  margin-right: 0px;
}

.our-blog .left-image ul li i {
  color: #47daed41;
  font-size: 16px;
  margin-right: 8px;
}

.our-blog .left-image  h4 {
  font-size: 20px;
  font-weight: 700;
  color: #000000;
  margin: 20px 0px 15px 0px;
}

.our-blog .left-image .info .main-blue-button {
  position: absolute;
  bottom: -80px;
  left: 0;
}

.our-blog .right-list {
  margin-left: 30px;
  text-decoration: none;
}
.our-blog .right-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.our-blog .right-list ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 1px 0;
  border-bottom: none !important; /* Remove any default borders */
  margin: 0;
}

.our-blog .right-list .left-content,
.our-blog .right-list .right-image {
  margin: 0;
  padding: 0;
  border: none;
}

/* Ensure images don't cause extra spacing */
.our-blog .right-list .right-image img {
  display: block;
  max-width: 100%;
  border: none;
  outline: none;
}

/* Responsive Design */
@media (max-width: 991px) {
  .our-blog .right-list .right-image img {
    width: 150px;
  }
}

@media (max-width: 768px) {
  .our-blog .right-list .right-image img {
    width: 90px;
  }
}

@media (max-width: 480px) {
  .our-blog .right-list .right-image img {
    width: 50px;
  }
}



.our-blog .right-list .left-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #47daed;
  margin: 10px 0px 5px 0px;
  text-align: center;
}


.our-blog .right-list .right-image img {
  width: 200px;
  border-radius: 20px;
  filter: hue-rotate(180deg);
}

@media (max-width: 991px) {
  .our-blog .right-list .right-image img {
    width: 150px; /* Slightly smaller on tablets */
    border-radius: 15px;
  }
}

/* Small Screens (Mobile) */
@media (max-width: 768px) {
  .our-blog .right-list .right-image img {
    width: 40px; /* Smaller size for mobile screens */
    border-radius: 12px;
  }
}

/* Extra Small Screens */
@media (max-width: 480px) {
  .our-blog .right-list .right-image img {
    width: 40px; /* Even smaller on very small screens */
    border-radius: 10px;
  }
}


/* Remove default list styles and any unwanted spacing */
.our-blog .right-list ul {
  list-style: none;
  padding: 10px;
  margin: 0;
}

/* Ensure no borders or extra margins on list items */
.our-blog .right-list ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
  margin: 0;
  border: none !important; /* Ensures no borders */
  box-shadow: none !important; /* Removes any shadow effect */
  background: transparent !important; /* Removes any background that might create a visual line */
}

/* Remove borders and padding from left and right content */
.our-blog .right-list .left-content,
.our-blog .right-list .right-image {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure images don’t create unwanted spacing */
.our-blog .right-list .right-image img {
  display: block;
  max-width: 100%;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}


/* 
---------------------------------------------
contact
--------------------------------------------- 
*/


/* section-heading styling */
.contact-us {
  padding: 50px 0;
  background-image: url(../images/contact-us.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#contact .container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

#contact .col-lg-6 {
  flex: 1; /* This will make both columns take equal space */
  padding: 15px; /* You can adjust the padding for spacing */
}

#contact .section-heading {
  margin-bottom: 10px;
}

#contact .section-heading h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

#contact .section-heading p {
  color: white; /* Make p tag text white */
}


#contact .phone-info h4 {
  margin-top: 15px;
}

@media (max-width: 992px) {
  #contact .container {
    flex-direction: column;
    align-items: flex-start;
  }
  #contact .col-lg-6 {
    width: 100%; /* Full width for smaller screens */
  }
}



/* Phone Info Styling */
.phone-info {
  margin-top: 40px;
  text-align: center;
  justify-content: center;
}

.phone-info h4 {
  font-size: 20px;
  font-weight: 700;
  color:red;
  text-align: center;
}

.phone-info h4 span i {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  background-color: #fff;
  border-radius: 50%;
  color: #ff3b2c;
  font-size: 22px;
  margin-left: 30px;
  margin-right: 15px;
}

.phone-info h4 span a {
  color:black;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none; 
  transition: color 0.3s ease, text-decoration 0.3s ease; /* Smooth transition */
}

.phone-info h4 span a:hover {
  color: #fe3f40; 
  text-decoration: underline; /* Add underline on hover */
}



/* social media icons */
.social-media-icons {
  display: flex;
  justify-content: flex-end; 
  margin-top: 20px; 
}

.social-media-icons a {
  margin: 8px; 
  font-size: 30px; 
  color: #ffffff;
  text-decoration: none;
}

.social-media-icons a:hover {
  color: #e61818; 
}

/* Responsive Design */
@media (max-width: 768px) {
  .contact-us .row {
    flex-direction: column;
    align-items: center;
  }

  .col-lg-6 {
    width: 100%;
    margin-bottom: 30px;
  }

  .section-heading h2 {
    font-size: 30px;
  }

  .section-heading p {
    font-size: 14px;
  }

  .phone-info h4 {
    font-size: 16px;
  }

  .phone-info h4 span i {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}



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

footer p {
  text-align: center;
}


/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1645px) {
  form#contact .contact-dec {
    display: none;
  }
}

@media (max-width: 992px) {
  .main-banner {
    padding-top: 140px;
  }

  #office-banner {
    padding-top:0px;
  }
  .main-banner .left-content {
    margin-right: 0px;
    text-align: center;
    margin-bottom: 45px;
  }
  .main-banner:after {
    top: 76px;
    z-index: -1;
  }
  .main-banner .left-content form,
  .main-banner .left-content form input {
    width: 100%!important;
  }
  #about {
    margin-top: 0px;
  }
  .about-us {
    position: relative;
    background-image: none;
    padding: 0px;
  }
  .about-us .left-image {
    margin-right: 0px;
    position: absolute;
    bottom: -220px;
    right: 0;
  }
  .about-us .services {
    text-align: center;
  }
  .about-us .services .item  {
    background: linear-gradient(90deg, #47daed, #03a4ed);
    padding: 30px;
    border-radius: 20px;
    display: inline-block;
  }
  .about-us .services .item .right-text {
    text-align: left;
  }
  .our-services {
    margin-top: 200px;
  }
  .our-services .left-image {
    margin-right: 0px;
    margin-bottom: 45px;
  }
  .our-services .section-heading h2,
  .our-services .section-heading p {
    margin-right: 0px;
    text-align: center;
  }
  .our-portfolio .section-heading h2 {
    margin: 0px 0px 80px 0px;
  }
  .our-portfolio .item {
    margin-bottom: 15px;
  }
  .our-blog {
    margin-top: 0px;
  }
  .our-blog .top-dec {
    display: none;
  }
  .our-blog .section-heading h2 {
    margin-right: 0px;
    text-align: center;
    margin-bottom: 45px;
  }
  .our-blog .left-image .info .inner-content {
    position: relative;
    margin-right: 0px;
  }
  .our-blog .left-image .info .main-blue-button {
    position: relative;
    bottom: 0px;
    margin-top: 30px;
  }
  .our-blog .left-image {
    margin-bottom: 45px;
  }
  .contact-us {
    margin-top: 60px;
    padding: 120px 0px;
  }
  .contact-us .section-heading {
    text-align: center;
  }
  
}

@media (max-width: 767px) {
  .about-us .left-image {
    bottom: -200px;
  }
  .our-blog .right-list {
    margin-left: 0px;
  }
  
  .our-blog .right-list ul li {
    display: inline-block;
    margin-top: 0px;
    padding-top: 1px;
    text-align: left;
  }
  .our-blog .right-list .left-content {
    margin-right: 0px;
    width: 100%;
    margin-bottom: 8px;
  }
  .our-blog .right-list .right-image,
  .our-blog .right-list .right-image img {
    width: 100%
  }
  .phone-info h4 span {
    display: block;
    margin-top: 8px;
  }
  .phone-info h4 span i {
    margin-left: 0px;
  }
}