/*

TemplateMo 568 DigiMedia

https://templatemo.com/tm-568-digimedia

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/

.tab-container {
  background: #fff;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  overflow: hidden;
  margin: 100px;
}

.tab-header {
  display: flex;
}

.tab-btn {
  flex: 1;
  padding: 12px;
  border: none;
  outline: none;
  background: #e9ecef;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
}

.tab-btn.active {
  background: #007bff;
  color: white;
}

.tab-btn:hover {
  background: #d6d9dc;
}

.tab-content {
  padding: 20px;
}

.content {
  display: none;
}

.content.active {
  display: block;
}



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;
  font-weight: 300;
  color: #000000;
}

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

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

::selection {
  background: #4da6e7;
  color: #fff !important;
}

::-moz-selection {
  background: #4da6e7;
  color: #fff !important;
}

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

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

.section-heading {
  position: relative;
  z-index: 2;
}

.section-heading h6 {
  font-size: 15px;
  font-weight: 700;
  color: #4da6e7;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.section-heading h4 {
  color: #2a2a2a;
  font-size: 35px;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 25px;
}

.section-heading h4 em {
  font-style: normal;
  color: #4da6e7;
}

.section-heading .line-dec {
  width: 50px;
  height: 2px;
  background-color: #4da6e7;
}

.border-first-button a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #4da6e7 !important;
  border: 1px solid #4da6e7 !important;
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all .5s;
}

.border-first-button a:hover {
  background-color: #4da6e7;
  color: #fff !important;
}



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


/* Style for the main logo image */
.logo-img {
    /* Set a specific height and let the width adjust proportionally */
    height: 100px; 
    width: auto; 
    
    /* Center the image vertically, replacing the old H1's margin */
    margin-top: 5px; 
    display: block; /* Ensures the margin applies correctly */
}

/* Adjust the link container if necessary */
.logo {
    /* Make sure the clickable area is as tall as the image */
    line-height: 0; 
}

.pre-header {
  background-color: #efefef;
  height: 60px;
  padding: 15px 0px;
}

.pre-header ul li {
  display: inline-block;
}

.pre-header ul.info li {
  /* margin-right: 45px; */
}

.pre-header ul.info li a {
  color: #afafaf;
  font-size: 10px;
  transition: all .3s;
}

.pre-header ul.info li a:hover {
  color: #4da6e7;
}

.pre-header ul.info li a i {
  font-size: 10px;
  margin-right: 8px;
}

.pre-header ul.social-media {
  text-align: right;
}

.pre-header ul.social-media li {
  margin-left: 5px;
}

.pre-header ul.social-media li a {
  background-color: #afafaf;
  color: #fff;
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  font-size: 14px;
  transition: all .3s;
}

.pre-header ul.social-media li a:hover {
  background-color: #4da6e7;
}

.background-header {
  background-color: #fff!important;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 5px 8px rgba(0,0,0,0.03);
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #fff;
}

.background-header .main-nav .nav li:hover a {
  color: #4da6e7;
}

.background-header .nav li a.active {
  position: relative;
  color: #fff;
}

.background-header .nav li a.active:after {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #4da6e7;
  content: '';
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
}

.background-header .nav li:last-child a.active:after {
  background-color: transparent;
}

.header-area {
  background-color: #fff;
  box-shadow: 0px 5px 8px rgba(0,0,0,0.03);
  position: absolute;
  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: 100px;
  background: transparent;
}

.header-area .main-nav .logo {
  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 {
    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 {
  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 {
  padding: 0px 20px !important;
  font-weight: 400;
}

.header-area .main-nav .nav li:last-child a:hover ,
.background-header .main-nav .nav li:last-child a:hover {
  color: #fff !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:hover a,
.header-area .main-nav .nav li a.active {
  color: #4da6e7!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #4da6e7!important;
  opacity: 1;
}

.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: #4da6e7!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: #2a2a2a;
  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: #2a2a2a;
}

.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: #2a2a2a;
  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: #2a2a2a;
}

.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: #2a2a2a;
}

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

.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: #2a2a2a;
}

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

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

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

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

@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;
  }
  .background-header .nav li a.active:after {
    display: none;
  }
}

@media (max-width: 767px) {
  .pre-header ul.info li:last-child {
    display: none;
  }
  .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: #4da6e7!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #fff;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
    box-shadow: 0px 5px 8px rgba(0,0,0,0.03);
  }
  .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: #4da6e7!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: 993px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}




/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/





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

.main-banner:after {
  content: '';
  background-image: url(../images/slider-left-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 60px;
  width: 262px;
  height: 625px;
  z-index: -1;
}

.main-banner:before {
  content: '';
  background-image: url(../images/slider-right-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 60px;
  width: 1159px;
  height: 797px;
  z-index: -1;
}

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

.main-banner .left-content h6 {
  text-transform: capitalize;
  font-size: 30px;
  font-weight: 700;
  color: #3e3e3e;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.main-banner .left-content h2 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  font-size: 80px;
  color: #4596d0;;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.main-banner .left-content p {
  margin-bottom: 30px;
  margin-right: 45px;
  text-transform: capitalize;
  text-align: justify;
  font-weight: 400;
  font-family: cursive;

}

.main-banner .right-image {
  text-align: right;
  position: relative;
  z-index: 20;
}

.main-banner .right-image img {
  max-width:400px;
}



/* 
---------------------------------------------
About Style
--------------------------------------------- 
*/


#about{
  padding: 50px;
}

.about-left-image img {
  margin-right: 45px;
  margin-top: 40px;
}

.about-right-content p {
  margin-top: 30px;
  margin-bottom: 45px;
  text-align: justify;
}

.skills-content {
  position: relative;
  z-index: 1;
  margin-top: -50px;
  background-color: #f5f5f5;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  padding: 110px 0px 50px 0px;
}

.skill-item {
  text-align: center;
}

.progress {
  width: 150px;
  height: 150px;
  line-height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}
.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left {
  left: 0;
}
.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 5px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: #fd6a54;
}

.first-skill-item .progress .progress-bar {
  border-color: #4da6e7;
}

.second-skill-item .progress .progress-bar {
  border-color: #726ae3;
}

.third-skill-item .progress .progress-bar {
  border-color: #f58b56;
}

.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right {
  right: 0;
}
.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}
.progress .progress-value {
  text-align: center;
  color: #2a2a2a;
  display: flex;
  width: 100%;
  border-radius: 50%;
  font-size: 35px;
  text-align: center;
  line-height: 25px;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: 700;
}
.progress .progress-value div {
  margin-top: 10px;
}
.progress .progress-value span {
  font-size: 18px;
  text-transform: none;
  color: #afafaf;
  font-weight: 300;
}

/* This for loop creates the  necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
.progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-1 1.5s linear forwards;
}
.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-2 1.5s linear forwards;
}
.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-3 1.5s linear forwards;
}
.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-4 1.5s linear forwards;
}
.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-1 1.5s linear forwards 1.5s;
}

.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.5s;
}

.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-3 1.5s linear forwards 1.5s;
}

.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.5s;
}

.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-5 1.5s linear forwards 1.5s;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg);
  }
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(72);
    transform: rotate(72deg);
  }
}
@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(108);
    transform: rotate(108deg);
  }
}
@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg);
  }
}
@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}
.progress {
  margin-bottom: 1em;
}

/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/
/* Custom CSS for Corporate/Political Tabs */
.corporate-political-tabs {
    text-align: center; /* Center the buttons */
    margin-bottom: 30px; /* Space below buttons */
    /* Ensure the buttons are displayed inline for the d-flex row */
    display: flex;
    justify-content: center;
}

.corporate-political-tabs .main-button {
    /* Use the same style as the "Free Quote" header button for visual consistency */
    display: inline-block;
    padding: 10px 20px;
    color: #4da6e7;
    border: 1px solid #4da6e7;
    border-radius: 23px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all .5s;
    cursor: pointer;
    margin: 0 10px; /* Add spacing between the two buttons */
}

.corporate-political-tabs .main-button:hover,
.corporate-political-tabs .active-tab {
    background-color: #4da6e7;
    color: #fff !important;
}

/* Ensure the main service content group starts displayed */
#services-tabs-content {
    display: block !important;
}

/* Custom CSS for Corporate/Political Tabs */
.corporate-political-tabs {
    text-align: center; /* Center the buttons */
    /* Ensure the buttons are displayed inline for the d-flex row */
    display: flex;
    justify-content: center;
    margin-bottom: 30px; 
}

.corporate-political-tabs .main-button {
    /* Use the same style as the "Free Quote" header button for visual consistency */
    display: inline-block;
    padding: 10px 20px;
    color: #4da6e7;
    border: 1px solid #4da6e7;
    border-radius: 23px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all .5s;
    cursor: pointer;
    margin: 0 10px; /* Add spacing between the two buttons */
}

.corporate-political-tabs .main-button:hover,
.corporate-political-tabs .active-tab {
    background-color: #4da6e7;
    color: #fff !important;
}

/* Ensure the main service content group starts displayed */
#services-tabs-content {
    display: block !important;
}

.services {
  padding-top: 130px;
  position: relative;
}

.services:after {
  content: '';
  background-image: url(../images/services-left-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 786px;
  height: 1217px;
  z-index: 0;
}

.services:before {
  content: '';
  background-image: url(../images/services-right-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 400px;
  width: 161px;
  height: 413px;
  z-index: 0;
}

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

.services .section-heading .line-dec {
  margin: 0 auto;
}

.services .naccs {
  position: relative;
  z-index: 1;
}

.services .icon {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.services .naccs .menu div h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  width: 100%;
}

.services .icon img {
  margin-bottom: 10px;
  max-width: 60px;
  min-width: 60px;
}

.services .naccs .menu {
  text-align: center;
  margin-bottom: 30px;
}

.services .naccs .menu div {
  color: #2a2a2a;
  margin: 0px;
  width: 11%;
  font-size: 11px;
  font-weight: 700;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  position: relative;
  border-radius: 15px;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.services .naccs .menu div .thumb {
  display: inline-block;
  width: 100%;
  padding: 30px 0px;
  background-color: #fff;
}

.services .naccs .menu div.active {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}

.services ul.nacc {
  height: 100% !important;
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.services ul.nacc li {
  opacity: 0;
  transform: translateX(-50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.services ul.nacc li.active {
  transition-delay: 0.3s;
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  background-color: #fff;
  border-radius: 15px;
  padding: 80px 120px 50px 120px;
}

.services ul.nacc li {
  width: 100%;
}

.services ul.nacc li .right-image img {
  max-width: 420px;
  float: right;
}

.services .nacc .thumb h4 {
  color: #2a2a2a;
  font-size: 20px;
  font-weight: 700;
  line-height: 35px;
  margin-bottom: 25px;
}

.services .nacc .thumb .main-white-button {
  text-align: right;
  margin-top: 40px;
}

.services .nacc .thumb .main-white-button a {
  background-color: #8d99af;
  color: #fff;
}

.services .nacc .thumb .main-white-button a i {
  background-color: #fff;
  color: #8d99af;
}

.services .left-text h4 {
  font-size: 20px;
  font-weight: 700;
  color: #4da6e7 !important;
}

.services .left-text p {
  margin-bottom: 30px;
}

.nacc .ticks-list span {
  display: inline-block;
  opacity: 1;
  margin-right: 45px;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 400;
}



/* 
---------------------------------------------
Free Quote
--------------------------------------------- 
*/

.free-quote {
  background-image: url(../images/quote-bg-v3.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 120px 0px;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: 130px;
}

.free-quote .section-heading {
  margin-bottom: 60px;
}

.free-quote .section-heading h6,
.free-quote .section-heading h4 {
  color: #fff;
}

.free-quote .section-heading .line-dec {
  margin: 0 auto;
  background-color: #fff;
}

.free-quote form {
  background-color: #fff;
  display: inline-block;
  width: 100%;
  min-height: 80px;
  border-radius: 40px;
  position: relative;
  z-index: 1;
}

.free-quote form input {
  width: 100%;
  margin-top: 20px;
  margin-left: 30px;
  color: #afafaf;
  font-weight: 400;
  font-size: 15px;
  height: 40px;
  background-color: transparent;
  border-bottom: 1px solid #eee;
  border-top: none;
  border-left: none;
  border-right: none;
  position: relative;
  z-index: 2;
  outline: none;
}

.free-quote form button {
  width: 100%;
  height: 80px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  outline: none;
  border: none;
  margin-left: 30px;
  background-color: #4da6e7;
  font-size: 15px;
  color: #fff;
}


/* 
---------------------------------------------
Portfolio
--------------------------------------------- 
*/

.our-portfolio {
  padding-top: 50px;
  overflow: hidden;
  position: relative;
}

.our-portfolio:before {
  content: '';
  background-image: url(../images/portfolio-right-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 0px;
  width: 414px;
  height: 861px;
  z-index: 1;
}

.our-portfolio:after {
  content: '';
  background-image: url(../images/portfolio-left-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 677px;
  height: 759px;
  z-index: 1;
}

.our-portfolio .section-heading {
  margin-bottom: 80px;
}

.our-portfolio .container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  position: relative;
  z-index: 2;
}

.our-portfolio .item {
  position: relative;
  z-index: 222;
}

.portfolio-item {
  border-radius: 25px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  margin: 15px;
}

.portfolio-item .thumb {
  position: relative;
  border-radius: 50px;
}

.portfolio-item:hover .down-content h4,
.portfolio-item:hover .down-content span {
  color: #4da6e7;
}

.portfolio-item .thumb img {
  border-top-right-radius: 23px;
  border-top-left-radius: 23px;
  overflow: hidden;
}

.portfolio-item .down-content {
  background-color: #fff;
  text-align: center;
  padding: 18px 0px;
  border-bottom-right-radius: 23px;
  border-bottom-left-radius: 23px;
}

.portfolio-item .down-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 8px;
  transition: all .3s;
}

.portfolio-item .down-content span {
  font-size: 15px;
  color: #afafaf;
  transition: all .3s;
}

.our-portfolio .owl-nav {
  display: inline-block!important;
  position: absolute;
  top: -125px;
  right: 15%;
  max-width: 1320px;
}

.our-portfolio .owl-nav .owl-next {
  margin-left: 10px;
}

.our-portfolio .owl-nav span {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  font-size: 30px;
  background-color: #eee;
  border-radius: 50%;
  color: #fff;
  transition: all 0.5s;
}

.our-portfolio .owl-nav span:hover {
  color: #fff;
  background-color: #4da6e7;
}




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

.contact-us {
  padding-top: 30px;
}

.contact-us .section-heading .line-dec {
  margin: 0 auto;
}

.contact-us .section-heading {
  text-align: center;
  margin-bottom: 80px;
}


form#contact:before {
  background-image: url(../images/contact-top-right-v3.png);
  position: absolute;
  right: 0;
  top: 0;
  width: 726px;
  height: 78px;
  background-repeat: no-repeat;
  content: '';
  z-index: 1;
}

.contact-dec img {
  max-width: 224px;
  position: absolute;
  right: 25px;
  top: -242px;
}

form#contact:after {
  background-image: url(../images/contact-bottom-right-v3.png);
  position: absolute;
  right: 0;
  bottom: 0;
  width: 532px;
  height: 106px;
  background-repeat: no-repeat;
  content: '';
  z-index: 1;
}

form#contact {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  position: relative;
  background-color: #fff;
  border-radius: 23px;
  text-align: center;
}

form#contact #map iframe {
  border-top-left-radius: 23px;
  border-bottom-left-radius: 23px;
  margin-bottom: -7px;
  position: relative;
  z-index: 2;
}

.fill-form {
  padding: 80px 60px 80px 30px;
}

.fill-form .info-post {
  margin-bottom: 20px;
}

.fill-form .icon {
  text-align: center;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 23px;
  padding: 25px 15px;
}

.fill-form .icon img {
  max-width: 60px;
  display: block;
  margin: 0 auto;
}

.fill-form .icon a {
  margin-top: 15px;
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: #2a2a2a;
  transition: all .3s;
}

.fill-form .icon:hover a {
  color: #4da6e7;
}

form#contact input {
  width: 100%;
  height: 46px;
  background-color: transparent;
  border: 1px solid #eee;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 20px;
  border-radius: 23px;
  margin-top: 30px;
}

form#contact input::placeholder {
  color: #aaa;
}

form#contact textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 200px;
  min-height: 200px;
  height: 200px;
  border-radius: 23px;
  background-color: transparent;
  border: 1px solid #eee;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 15px 20px;
  margin-top: 30px;
}

form#contact textarea::placeholder {
  color: #aaa;
}

form#contact button {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  color: #4da6e7;
  margin-top: 30px;
  width: 100%;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: 1px solid #4da6e7;
  transition: all .3s;
  outline: none;
}

form#contact button:hover {
  background-color: #4da6e7!important;
  color: #fff!important;
}

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

footer {
  background-image: url(../images/footer-bg-v3.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 130px;
}

footer p {
  text-align: center;
  margin: 20px 0px;
  color: #fff;
}

footer p a {
  color: #fff;
  transition: all .5s;
}

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

@media (max-width: 1200px) {
  .header-area .main-nav .logo h4 {
    font-size: 24px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 25px;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:last-child {
    padding-left: 20px;
  }
}

@media (max-width: 992px) {
  form#contact {
    overflow: hidden;
  }
  .header-area .main-nav .logo h4 {
    font-size: 20px;
  }
  .main-banner .left-content {
    margin-right: 0px;
  }
  .main-banner {
    text-align: center;
    padding: 0px 0px 30px 0px;
  }
  .main-banner:before {
    display: none;
  }
  .main-banner .right-image {
    margin: 30px auto 0px auto;
    text-align: center;
  }
  .features-item {
    margin-bottom: 45px;
  }
  .last-features-item,
  .last-skill-item {
    margin-bottom: 0px !important;
  }
  .skill-item {
    margin-bottom: 30px;
  }
  .about-left-image img {
    margin-right: 0px;
    margin-bottom: 45px;;
  }
  .services .naccs .menu div {
    font-size: 15px;
    font-weight: 500;
  }
  .service-item {
    text-align: center;
  }
  .service-item .icon {
    margin-top: 0px;
    margin-bottom: 30px;
  }
  .about-us .left-image {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 45px;
  }
  .blog-posts {
    margin-left: 0px;
    margin-top: 30px;
  }
  .post-item {
    margin-bottom: 70px;
  }
  .our-portfolio .owl-nav {
    display: none !important;
  }
  .contact-info {
    margin-top: 60px;
  }
  form#contact {
    padding: 45px;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo h4 {
    font-size: 30px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 30px;
    margin-left: 5px;
  }
  .main-banner .info-stat {
    margin-bottom: 15px;
  }
  .service-item {
    text-align: center;
    padding: 30px;
  }
  .service-item .icon {
    float: none;
    margin-right: 0px;
    margin-bottom: 15px;
  }
  .service-item .right-content {
    display: inline-block;
  }
  .services .naccs .menu div .thumb {
    padding: 5px;
  }
  .services .icon img {
    margin: 0px;
  }
  .services ul.nacc li.active {
    padding: 45px;
  }
  .services .naccs .menu div  {
    font-size: 0px;
  }
  .services ul.nacc li .right-image img {
    float: none;
  }
  .our-portfolio .section-heading,
  .about-us .section-heading,
  .about-us .about-item,
  .about-us p,
  .about-us .main-green-button {
    text-align: center;
  }
  .our-portfolio .section-heading .line-dec {
    margin: 0 auto;
  }
  .our-services .section-heading {
    margin-left: 15px;
    margin-right: 15px;
  }
  .free-quote form input {
    margin-left: 0px;
    padding: 0px 30px;
  }
  .free-quote form button {
    margin-left: 0px;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 0px;
  }
  .blog-posts {
    margin-left: 0px;
    margin-top: 30px;
  }
  .post-item {
    margin-bottom: 30px;
  }
  .post-item .thumb img {
    max-width: 140px;
  }
  .post-item .right-content p {
    display: none;
  }
  .about-us .about-item {
    margin-top: 15px;
  }
  form#contact {
    padding: 30px;
  }

  #rogress-bars{
    visibility:hidden;
  }
 /* Header bar layout */
  .header-area {
    height: auto;
    padding: 0;
  }

  .header-area .main-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 8px 16px;
    overflow: visible;
  }

  /* Logo normal on left */
  .header-area .main-nav .logo {
    float: none;
  }

  /* Hamburger button on right */
  .header-area .main-nav .menu-trigger {
    display: block !important;
    cursor: pointer;
    width: 32px;
    height: 40px;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 2001;
  }

  /* Base state: menu HIDDEN, positioned BELOW header */
  .header-area .main-nav .nav {
    position: absolute;
    top: 40%;        /* just under the main-nav bar */
    left: auto;
    right: 0;
    width: 100%;
    margin-top: 0;
    padding: 0;
    background: #ffffff;
    border-top: 1px solid #eee;
    display: none;    /* hidden by default */
    flex-direction: column;
    align-items: stretch;
    z-index: 2000;
  }

  /* When JS adds .open, show the dropdown */
  .header-area .main-nav .nav.open {
    display: block;
  }

  /* Menu items styles */
  .header-area .main-nav .nav li {
    width: 100%;
    border-bottom: 1px solid #e7e7e7;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .header-area .main-nav .nav li a {
    display: block;
    text-align: center;
    height: 48px !important;
    line-height: 48px !important;
    padding: 0 !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
    border: none !important;
  }

  .header-area .main-nav .nav li a:hover,
  .header-area .main-nav .nav li a.active {
    background: #eee !important;
    color: #4da6e7 !important;
  }
}


/* WhatsApp Floating Button Style */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 28px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.whatsapp-float:hover {
  background-color: #1ebe5b;
  transform: scale(1.05);
}



/* 
---------------------------------------------
services page
--------------------------------------------- 
*/

        /* Layout */
        .services-section {
            padding: 20px 0 30px 0;
            background: url("assets\images\portfolio-04.jpg");
        }

        .section-heading {
            text-align: center;
            margin-bottom: 40px;
            margin-top: 50px;
        }

        .section-heading h6 {
            color: #007bff;
            font-weight: 600;
        }

        .section-heading h4 em {
            color: #007bff;
            font-style: normal;
        }

        .line-dec {
            width: 50px;
            height: 3px;
            background-color: #007bff;
            margin: 10px auto 0;
        }

        /* Header */
        .header-area {
            width: 100%;
            z-index: 9999;
            transition: all .3s;
        }

        .header-sticky.scrolled {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #fff;
            box-shadow: 0 0 15px rgba(0, 0, 0, .1);
            padding: 10px 0;
        }

        .pre-header {
            transition: transform .3s, opacity .3s;
            z-index: 10000;
        }

        .pre-header.hidden {
            transform: translateY(-100%);
            opacity: 0;
            height: 0;
            padding-top: 0;
            padding-bottom: 0;
            overflow: hidden;
            pointer-events: none;
        }

        /* Main tabs */
        .main-nav-tabs .nav-link {
            color: #333;
            font-weight: bold;
            border: none;
            border-bottom: 3px solid transparent;
            padding: 15px 20px;
            transition: all .3s;
        }

        .main-nav-tabs .nav-link.active {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            background-color: transparent;
        }

        /* Left thumbs (nested navigation) */
        .menu .thumb {
            cursor: pointer;
            padding: 15px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #fff;
            transition: all .3s;
            display: flex;
            align-items: center;
            font-weight: 500;
        }

        .menu .thumb:hover,
        .menu .thumb.active {
            background-color: #007bff;
            color: #fff;
            border-color: #007bff;
        }

        .menu .thumb .icon {
            margin-right: 10px;
            font-size: 18px;
        }

        /* Content panes */
        .service-content .nacc-content {
            display: none;
        }

        .service-content .nacc-content.active {
            display: block;
        }

        .service-content .thumb {
            padding: 30px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
        }

        .service-content h4 {
            color: #333;
            margin-bottom: 15px;
        }

        .service-content p {
            color: #666;
            margin-bottom: 20px;
        }

        /* Ticks list */
        .ticks-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(240px, 1fr));
            gap: 10px 20px;
        }

        .ticks-list span {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            color: #333;
            font-size: 14px;
            line-height: 1.4;
        }

        .ticks-list i {
            color: #28a745;
            margin-top: 3px;
        }

        .right-image img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
        }

        /* Floating WhatsApp Button */
        .whatsapp-float {
            position: fixed;
            width: 60px;
            height: 60px;
            bottom: 20px;
            right: 20px;
            background-color: #25D366;
            color: #fff;
            border-radius: 50%;
            text-align: center;
            font-size: 28px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform .2s ease, background-color .2s ease;
        }

        .whatsapp-float:hover {
            background-color: #1ebe5b;
            transform: scale(1.05);
        }

    
        @media (max-width: 991px) {
            .ticks-list {
                grid-template-columns: 1fr;
            }
        }

        /* ================================
   RESPONSIVE OVERRIDES (append-only)
   Keep desktop unchanged; only adjust ≤ 992px & ≤ 768px
   ================================ */

/* Tablet & down (≤ 992px) */
@media (max-width: 992px) {

  /* Header: make sticky & collapse nav */
  .header-area {
    position: sticky;
    top: 0;
    left: 0; right: 0;
    z-index: 1000;
    height: auto;
  }
  .header-area .main-nav {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
  }
  .header-area .main-nav .nav {
    display: none;                 /* collapsed by default */
    flex-direction: column;
    align-items: stretch;
    width: 50%;
    background: #fff;
    border-top: 1px solid #eee;
    margin-top: 8px;
    padding: 8px 16px;
  }
  .header-area .main-nav .nav.open { /* toggled by JS */
    display: flex;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    border-bottom: 1px solid #e7e7e7;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
    border: none !important;
  }
  .header-area .main-nav .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    background: #eee !important;
    color: #4da6e7 !important;
  }

/* Burger button visible only on mobile/tablet */
.header-area .main-nav .menu-trigger {
    display: block !important;
    cursor: pointer;
    width: 32px;
    height: 40px;
    position: relative;   /* FIXED */
    z-index: 2000;
}


  /* Submenu: make it expand inline on mobile */
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: visible;
    opacity: 1;
    transform: none;
    top: 0;
    width: 100%;
    box-shadow: none;
    height: 0;
    overflow: hidden;
    transition: height .25s ease;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto;
  }
  .header-area .main-nav .nav li.submenu:after {
    right: 12px;
    top: 15px;
  }

  /* Pre-header: save space */
  .pre-header {
    min-height: 44px;
    padding: 8px 0;
  }
  .pre-header ul.info li:last-child {
    display: none;
  }

  /* Banner: center on small screens, scale image */
  .main-banner {
    text-align: center;
    padding: 60px 0 30px 0;
  }
  .main-banner:before {
    display: none;
  }
  .main-banner .right-image {
    margin: 24px auto 0;
    text-align: center;
  }
  .main-banner .right-image img {
    max-width: 70vw;
  }
  .main-banner .left-content p {
    margin: 0 16px 20px;
  }

  /* General page spacing */
  .page-section {
    margin-top: 60px;
  }

  /* Services tabs grid & panel padding */
  .services .naccs .menu {
    text-align: center;
    margin-bottom: 20px;
  }
  .services .naccs .menu div {
    width: auto;
    display: inline-block;
    margin: 6px;
    font-size: 13px;
    font-weight: 600;
  }
  .services ul.nacc li.active {
    padding: 30px 22px;
  }
  .services ul.nacc li .right-image img {
    float: none;
    max-width: 100%;
  }

  /* Ticks list → single column */
  .ticks-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 0;
  }

  /* Free Quote: inputs stack */
  .free-quote form {
    border-radius: 20px;
    padding: 16px;
  }

  /* Contact form padding */
  form#contact {
    padding: 30px;
  }

  /* Portfolio: hide owl nav */
  .our-portfolio .owl-nav {
    display: none !important;
  }

  /* WhatsApp button: slightly smaller */
  .whatsapp-float {
    width: 56px;
    height: 56px;
    font-size: 26px;
    right: 16px;
    bottom: 16px;
  }

  .about-left-image img {
  margin-right: 45px;
  margin-top: 100px;
}
}

/* Mobile (≤ 768px) – tighter layout */
@media (max-width: 768px) {

  .main-banner {
    padding: 40px 0 24px 0;
  }
  .main-banner .left-content h2 {
    font-size: 40px;
  }

  .services ul.nacc li.active {
    padding: 24px 18px;
  }

  .about-left-image img {
  margin-right: 45px;
  margin-top: 100px;
}

  form#contact input,
  form#contact textarea {
    margin-top: 14px;
  }

  footer {
    padding: 12px 8px;
  }

  .whatsapp-float {
    width: 52px;
    height: 52px;
    font-size: 24px;
    right: 14px;
    bottom: 14px;
  }
}

/* Super small phones (≤ 360px) */
@media (max-width: 360px) {
  .header-area .main-nav { padding: 6px 12px; }
  .main-banner .right-image img { max-width: 80vw; }
}

/* ---------------------------------------------
UI Polish Enhancements
--------------------------------------------- */
:root {
  --ui-brand: #4da6e7;
  --ui-brand-strong: #2f8fd3;
  --ui-text: #1f2937;
  --ui-muted: #667085;
  --ui-surface: #ffffff;
  --ui-soft: #f7fbff;
  --ui-border: #dbe6f2;
  --ui-radius-sm: 12px;
  --ui-radius-md: 20px;
  --ui-radius-pill: 999px;
  --ui-shadow-soft: 0 10px 26px rgba(20, 56, 96, 0.1);
  --ui-shadow-hover: 0 18px 38px rgba(20, 56, 96, 0.16);
}

body {
  color: var(--ui-text);
}

p {
  color: var(--ui-muted);
  line-height: 1.85;
}

a,
button,
input,
textarea {
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(77, 166, 231, 0.32);
}

.pre-header {
  border-bottom: 1px solid rgba(77, 166, 231, 0.08);
}

.header-area {
  transition: background-color .3s ease, box-shadow .3s ease;
}

.background-header {
  box-shadow: var(--ui-shadow-soft);
}

.main-banner .left-content h2 {
  letter-spacing: -0.6px;
  line-height: 1.2;
}

.section-heading h4 {
  line-height: 1.28;
}

.section-heading .line-dec {
  border-radius: var(--ui-radius-pill);
}

.border-first-button a {
  border-radius: var(--ui-radius-pill);
}

.border-first-button a:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(77, 166, 231, 0.28);
}

.services .naccs .menu div {
  border-radius: var(--ui-radius-sm);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.services .naccs .menu div:hover {
  transform: translateY(-3px);
  box-shadow: var(--ui-shadow-soft);
}

.services ul.nacc li.active,
.portfolio-item,
form#contact,
.free-quote form {
  border: 1px solid rgba(77, 166, 231, 0.1);
  box-shadow: var(--ui-shadow-soft);
}

.portfolio-item {
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}

.portfolio-item .thumb img {
  transition: transform .45s ease;
}

.portfolio-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--ui-shadow-hover);
}

.portfolio-item:hover .thumb img {
  transform: scale(1.04);
}

.our-portfolio .owl-nav span {
  background-color: #e8f3fd;
  color: var(--ui-brand);
}

.our-portfolio .owl-nav span:hover {
  color: #fff;
  background-color: var(--ui-brand);
}

form#contact input,
form#contact textarea,
.free-quote form input {
  border-radius: var(--ui-radius-sm);
  border: 1px solid var(--ui-border);
  background-color: #fcfdff;
}

form#contact input:hover,
form#contact textarea:hover,
.free-quote form input:hover {
  border-color: #b8d6ee;
}

form#contact input:focus,
form#contact textarea:focus,
.free-quote form input:focus {
  border-color: var(--ui-brand);
  box-shadow: 0 0 0 3px rgba(77, 166, 231, 0.22);
}

.free-quote form button,
form#contact button {
  border-radius: var(--ui-radius-pill);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.free-quote form button:hover,
form#contact button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(77, 166, 231, 0.24);
}

.whatsapp-float {
  box-shadow: 0 10px 24px rgba(19, 173, 84, 0.35);
}

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 92px;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ui-brand), var(--ui-brand-strong));
  color: #fff;
  font-size: 24px;
  line-height: 46px;
  text-align: center;
  cursor: pointer;
  z-index: 998;
  box-shadow: var(--ui-shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.reveal-ready {
  opacity: 0;
  transform: translateY(22px);
}

.reveal-ready.is-revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .55s ease, transform .55s ease;
}

@media (max-width: 991px) {
  .section-heading h4 {
    font-size: 30px;
  }

  .logo-img {
    height: 78px;
  }

  .back-to-top {
    right: 14px;
    bottom: 82px;
    width: 42px;
    height: 42px;
    font-size: 22px;
    line-height: 42px;
  }
}

@media (max-width: 767px) {
  .section-heading h4 {
    font-size: 27px;
  }

  .main-banner .left-content h2 {
    letter-spacing: -0.3px;
  }

  .back-to-top {
    right: 12px;
    bottom: 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-ready,
  .reveal-ready.is-revealed {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------------------------------------------
About Page - Premium Animated UI
--------------------------------------------- */
.about-page {
  background:
    radial-gradient(circle at 8% 14%, rgba(77, 166, 231, 0.15) 0%, transparent 38%),
    radial-gradient(circle at 88% 10%, rgba(114, 106, 227, 0.14) 0%, transparent 36%),
    #f7fbff;
}

.about-page .main-banner,
.about-page .about-pillars,
.about-page .about-values,
.about-page .about-cta {
  position: relative;
  z-index: 2;
}

.about-page .about-hero {
  padding: 150px 0 70px;
  overflow: hidden;
}

.about-page .about-hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(1px);
  z-index: 1;
  animation: orb-drift 9s ease-in-out infinite;
}

.about-page .about-hero-orb.orb-one {
  width: 260px;
  height: 260px;
  top: 80px;
  left: -90px;
  background: radial-gradient(circle, rgba(77, 166, 231, 0.32) 0%, rgba(77, 166, 231, 0.05) 62%, transparent 75%);
}

.about-page .about-hero-orb.orb-two {
  width: 220px;
  height: 220px;
  right: -70px;
  bottom: 30px;
  background: radial-gradient(circle, rgba(95, 132, 242, 0.28) 0%, rgba(95, 132, 242, 0.06) 60%, transparent 74%);
  animation-delay: 1.2s;
}

.about-page .about-hero:before,
.about-page .about-hero:after {
  display: none;
}

.about-page .about-hero-panel {
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.92), rgba(244, 250, 255, 0.9));
  border: 1px solid rgba(77, 166, 231, 0.18);
  border-radius: 34px;
  padding: 54px 48px;
  box-shadow: 0 24px 70px rgba(23, 72, 121, 0.14);
  backdrop-filter: blur(8px);
}

.about-page .about-kicker {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2f8fd3;
  background: rgba(77, 166, 231, 0.14);
  margin-bottom: 16px;
}

.about-page .about-hero h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.16;
  color: #142335;
  margin-bottom: 20px;
}

.about-page .about-hero p {
  max-width: 92%;
  font-size: 16px;
  color: #4b5f74;
  margin-bottom: 30px;
}

.about-page .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.about-page .hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
}

.about-page .hero-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #4da6e7, #5f84f2);
  box-shadow: 0 12px 24px rgba(77, 166, 231, 0.35);
}

.about-page .hero-btn-primary:hover {
  color: #fff;
  transform: translateY(-2px);
}

.about-page .hero-btn-secondary {
  color: #2f8fd3;
  border-color: rgba(77, 166, 231, 0.35);
  background: rgba(255, 255, 255, 0.7);
}

.about-page .hero-btn-secondary:hover {
  color: #1f79b9;
  border-color: #4da6e7;
  transform: translateY(-2px);
}

.about-page .hero-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 12px;
  max-width: 620px;
}

.about-page .mini-stat {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(77, 166, 231, 0.18);
  border-radius: 16px;
  padding: 14px 14px 13px;
  box-shadow: 0 10px 24px rgba(24, 85, 142, 0.1);
}

.about-page .mini-stat strong {
  display: block;
  font-size: 24px;
  line-height: 1;
  color: #1f3550;
  margin-bottom: 6px;
}

.about-page .mini-stat span {
  font-size: 13px;
  color: #51677f;
  font-weight: 500;
}

.about-page .about-hero-visual {
  position: relative;
  text-align: center;
}

.about-page .about-hero-visual img {
  max-width: min(100%, 420px);
  animation: hero-float 5.8s ease-in-out infinite;
}

.about-page .floating-chip {
  position: absolute;
  font-size: 12px;
  font-weight: 600;
  color: #1f3550;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(77, 166, 231, 0.22);
  border-radius: 999px;
  padding: 8px 12px;
  box-shadow: 0 12px 26px rgba(24, 85, 142, 0.16);
  animation: chip-float 4.8s ease-in-out infinite;
}

.about-page .floating-chip i {
  margin-right: 6px;
  color: #4da6e7;
}

.about-page .chip-one {
  top: 12%;
  right: -6%;
}

.about-page .chip-two {
  left: -5%;
  bottom: 14%;
  animation-delay: .7s;
}

.about-page .about-pillars {
  padding-top: 34px;
}

.about-page .about-values {
  padding-top: 30px;
  padding-bottom: 20px;
}

.about-page .about-card {
  height: 100%;
  padding: 30px 26px;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
  border: 1px solid rgba(77, 166, 231, 0.14);
  box-shadow: 0 14px 30px rgba(16, 64, 110, 0.09);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.about-page .about-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 45px rgba(16, 64, 110, 0.16);
  border-color: rgba(77, 166, 231, 0.35);
}

.about-page .about-card h3,
.about-page .about-card h5 {
  margin: 12px 0 10px;
  color: #1b2f45;
}

.about-page .about-card p {
  margin: 0;
  color: #4f647a;
  line-height: 1.75;
}

.about-page .about-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: #fff;
  background: linear-gradient(140deg, #4da6e7, #5f84f2);
  box-shadow: 0 10px 18px rgba(77, 166, 231, 0.36);
}

.about-page .about-values .section-heading {
  margin-top: 0;
  margin-bottom: 22px;
}

.about-page .about-story {
  margin-top: 70px;
  background: linear-gradient(135deg, #308fd7, #5f84f2);
  padding: 100px 0;
}

.about-page .about-story:before,
.about-page .about-story:after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  filter: blur(2px);
}

.about-page .about-story:before {
  left: -70px;
  top: -80px;
}

.about-page .about-story:after {
  right: -80px;
  bottom: -80px;
}

.about-page .story-panel {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  max-width: 860px;
  text-align: center;
  padding: 36px 34px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(7px);
}

.about-page .story-panel h6 {
  color: #d9f0ff;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  margin-bottom: 12px;
}

.about-page .story-panel h4 {
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 16px;
}

.about-page .story-panel h4 em {
  color: #c7ebff;
}

.about-page .story-panel p {
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}

.about-page .about-cta {
  padding-top: 95px;
}

.about-page .about-cta .section-heading {
  margin-top: 0;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes orb-drift {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-12px) translateX(8px); }
}

@media (max-width: 991px) {
  .about-page .about-hero {
    padding-top: 120px;
    padding-bottom: 56px;
  }

  .about-page .about-hero-panel {
    padding: 32px 24px;
  }

  .about-page .about-hero p {
    max-width: 100%;
  }

  .about-page .hero-mini-stats {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .about-page .about-hero-visual {
    margin-top: 28px;
  }

  .about-page .chip-one {
    right: 0;
  }

  .about-page .chip-two {
    left: 0;
  }

  .about-page .about-story {
    margin-top: 50px;
    padding: 80px 0;
  }
}

@media (max-width: 767px) {
  .about-page .about-hero {
    padding-top: 104px;
  }

  .about-page .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .about-page .hero-btn {
    width: 100%;
  }

  .about-page .hero-mini-stats {
    grid-template-columns: 1fr;
  }

  .about-page .floating-chip {
    display: none;
  }

  .about-page .about-card {
    padding: 24px 20px;
  }

  .about-page .about-story {
    padding: 70px 0;
  }

  .about-page .story-panel {
    padding: 30px 20px;
  }
}

/* ---------------------------------------------
Home Page - Match About Theme
--------------------------------------------- */
.home-page {
  background:
    radial-gradient(circle at 7% 12%, rgba(77, 166, 231, 0.16) 0%, transparent 36%),
    radial-gradient(circle at 90% 8%, rgba(114, 106, 227, 0.14) 0%, transparent 35%),
    #f7fbff;
}

.home-page .main-banner {
  padding-top: 150px;
  padding-bottom: 68px;
}

.home-page .main-banner:before,
.home-page .main-banner:after {
  opacity: 0.22;
}

.home-page .main-banner .container {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 12px;
  box-shadow: none;
  backdrop-filter: none;
}

.home-page .main-banner .left-content h2 {
  color: #142335;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.14;
  margin-bottom: 10px;
}

.home-page .main-banner .left-content h6 {
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2f8fd3;
}

.home-page .main-banner .left-content p {
  color: #4d6178;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  line-height: 1.8;
}

.home-page .main-banner .right-image img {
  animation: hero-float 5.8s ease-in-out infinite;
  filter: drop-shadow(0 18px 26px rgba(22, 83, 135, 0.22));
}

.home-page .about.section,
.home-page .our-portfolio.section,
.home-page .contact-us.section {
  position: relative;
  z-index: 2;
}

.home-page .about.section {
  padding-top: 24px;
}

.home-page .about-left-image img {
  border-radius: 22px;
  box-shadow: 0 16px 36px rgba(16, 64, 110, 0.14);
}

.home-page .about-right-content {
  background: linear-gradient(180deg, #ffffff, #f8fcff);
  border: 1px solid rgba(77, 166, 231, 0.16);
  border-radius: 22px;
  padding: 24px 24px 10px;
  box-shadow: 0 14px 32px rgba(20, 75, 126, 0.11);
}

.home-page .about-right-content p {
  color: #4f647a;
}

.home-page .progress {
  filter: drop-shadow(0 8px 14px rgba(22, 83, 135, 0.16));
}

.home-page .our-portfolio {
  padding-top: 70px;
}

.home-page .portfolio-item .down-content {
  background: linear-gradient(180deg, #fff 0%, #f8fcff 100%);
}

.home-page #contact form#contact {
  border: 1px solid rgba(77, 166, 231, 0.14);
  overflow: hidden;
}

.home-page #contact form#contact:before,
.home-page #contact form#contact:after,
.home-page #contact .contact-dec {
  display: none !important;
}

.home-page #contact .container {
  overflow-x: clip;
}

.home-page #contact .info-post {
  background: #fff;
  border: 1px solid rgba(77, 166, 231, 0.12);
  border-radius: 14px;
  padding: 10px 10px;
}

.home-page #contact .row {
  align-items: stretch;
}

.home-page #contact #map {
  height: 100%;
}

.home-page #contact #map iframe {
  height: 100% !important;
  min-height: 560px;
  display: block;
}

.home-page #contact .fill-form {
  padding: 36px 30px 30px;
}

.home-page #contact .fill-form .info-post {
  margin-bottom: 14px;
}

.home-page #contact form#contact input,
.home-page #contact form#contact textarea {
  margin-top: 16px;
}

@media (max-width: 991px) {
  .home-page .main-banner {
    padding-top: 120px;
  }

  .home-page .main-banner .container {
    padding: 0 12px;
    border-radius: 0;
  }

  .home-page .about-right-content {
    margin-top: 18px;
    padding: 20px 16px 8px;
  }

  .home-page #contact .fill-form {
    padding: 24px 20px 22px;
  }

  .home-page #contact #map iframe {
    min-height: 420px;
  }
}

@media (max-width: 767px) {
  .home-page .main-banner {
    padding-top: 104px;
  }

  .home-page .main-banner .left-content h2 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }

  .home-page #contact #map iframe {
    min-height: 320px;
    border-bottom-left-radius: 0;
    border-top-right-radius: 23px;
  }

  .home-page #contact .fill-form {
    padding: 18px 14px 18px;
  }
}

/* ---------------------------------------------
Services Page - Match About Theme
--------------------------------------------- */
.services-page {
  background:
    radial-gradient(circle at 10% 14%, rgba(77, 166, 231, 0.14) 0%, transparent 36%),
    radial-gradient(circle at 87% 12%, rgba(114, 106, 227, 0.14) 0%, transparent 36%),
    #f7fbff;
}

.services-page .premium-services {
  padding-top: 150px;
  padding-bottom: 80px;
  background: none;
}

.services-page .premium-services .section-heading {
  margin-top: 0;
  margin-bottom: 28px;
}

.services-page .premium-services .section-heading h4 {
  color: #172a40;
}

.services-page .main-nav-tabs {
  gap: 10px;
}

.services-page .main-nav-tabs .nav-link {
  border: 1px solid rgba(77, 166, 231, 0.2);
  border-radius: 999px;
  padding: 10px 18px;
  color: #285a85;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.86);
}

.services-page .main-nav-tabs .nav-link.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #4da6e7, #5f84f2);
  box-shadow: 0 12px 24px rgba(77, 166, 231, 0.3);
}

.services-page .premium-services .tab-content {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(244, 250, 255, 0.9));
  border: 1px solid rgba(77, 166, 231, 0.16);
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 24px 58px rgba(16, 64, 110, 0.14);
}

.services-page .menu .thumb {
  border: 1px solid rgba(77, 166, 231, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #244969;
  box-shadow: 0 10px 22px rgba(20, 75, 126, 0.08);
}

.services-page .menu .thumb:hover,
.services-page .menu .thumb.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #4da6e7, #5f84f2);
  transform: translateY(-3px);
}

.services-page .service-content .thumb {
  border: 1px solid rgba(77, 166, 231, 0.14);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(20, 75, 126, 0.12);
}

.services-page .service-content h4 {
  color: #17304a;
}

.services-page .service-content p {
  color: #51677f;
}

.services-page .ticks-list span {
  background: #f6fbff;
  border: 1px solid rgba(77, 166, 231, 0.12);
  border-radius: 12px;
  padding: 8px 10px;
}

.services-page .ticks-list i {
  color: #24a35a;
}

.services-page footer {
  margin-top: 20px;
}

@media (max-width: 991px) {
  .services-page .premium-services {
    padding-top: 120px;
    padding-bottom: 50px;
  }

  .services-page .premium-services .tab-content {
    padding: 16px;
    border-radius: 20px;
  }
}

@media (max-width: 767px) {
  .services-page .premium-services {
    padding-top: 104px;
  }

  .services-page .main-nav-tabs .nav-link {
    width: 100%;
  }
}

/* ---------------------------------------------
Home Page - Premium Enhancements
--------------------------------------------- */
.home-page .main-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: 118px;
  padding-bottom: 28px;
  min-height: 100vh;
}

.home-page .home-hero-panel {
  position: relative;
  z-index: 3;
  border-radius: 34px;
  padding: clamp(22px, 2.6vw, 44px) clamp(18px, 2.2vw, 34px);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.95), rgba(242, 249, 255, 0.92));
  border: 1px solid rgba(77, 166, 231, 0.2);
  box-shadow: 0 28px 66px rgba(16, 64, 110, 0.15);
}

.home-page .home-kicker {
  display: inline-block;
  margin-bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2f8fd3;
  background: rgba(77, 166, 231, 0.14);
}

.home-page .home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 16px 0 16px;
}

.home-page .home-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 600;
  color: #2f8fd3;
  border: 1px solid rgba(77, 166, 231, 0.35);
  background: rgba(255, 255, 255, 0.76);
}

.home-page .home-secondary-btn:hover {
  color: #1f79b9;
  border-color: #4da6e7;
  transform: translateY(-2px);
}

.home-page .home-hero-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 10px;
  max-width: 430px;
}

.home-page .hero-metric {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(77, 166, 231, 0.18);
  border-radius: 16px;
  padding: 11px 12px;
  box-shadow: 0 10px 22px rgba(24, 85, 142, 0.1);
}

.home-page #top {
  scroll-margin-top: 118px;
}

.home-page .pre-header {
  display: none !important;
}

.home-page .header-area {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  height: 92px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(17, 62, 105, 0.1);
  z-index: 1001;
}

.home-page .header-area .main-nav {
  min-height: 92px;
}

.home-page .header-area .main-nav .logo {
  line-height: 92px;
}

.home-page .header-area .logo-img {
  height: 84px;
  margin-top: 2px;
}

.home-page .header-area .main-nav .nav {
  margin-top: 26px;
}

.home-page .header-area .main-nav .nav li a {
  color: #20344d;
}

.home-page .header-area .main-nav .nav li:hover a,
.home-page .header-area .main-nav .nav li a.active {
  color: #2f8fd3 !important;
}

.home-page .background-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(17, 62, 105, 0.14);
}

.home-page .hero-metric strong {
  display: block;
  color: #1f3550;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 5px;
}

.home-page .hero-metric span {
  font-size: 13px;
  color: #51677f;
  font-weight: 500;
}

.home-page .home-hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: orb-drift 9s ease-in-out infinite;
}

.home-page .home-hero-orb.orb-left {
  width: 260px;
  height: 260px;
  top: 70px;
  left: -110px;
  background: radial-gradient(circle, rgba(77, 166, 231, 0.28) 0%, rgba(77, 166, 231, 0.06) 62%, transparent 76%);
}

.home-page .home-hero-orb.orb-right {
  width: 220px;
  height: 220px;
  right: -80px;
  bottom: 60px;
  background: radial-gradient(circle, rgba(95, 132, 242, 0.24) 0%, rgba(95, 132, 242, 0.04) 60%, transparent 75%);
  animation-delay: 1.2s;
}

.home-page .right-image {
  position: relative;
}

.home-page .home-floating-tag {
  position: absolute;
  font-size: 12px;
  font-weight: 600;
  color: #1f3550;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(77, 166, 231, 0.2);
  border-radius: 999px;
  padding: 7px 12px;
  box-shadow: 0 12px 22px rgba(24, 85, 142, 0.14);
  animation: chip-float 4.8s ease-in-out infinite;
}

.home-page .home-floating-tag i {
  margin-right: 6px;
  color: #4da6e7;
}

.home-page .home-floating-tag.tag-one {
  top: 10%;
  right: -2%;
}

.home-page .home-floating-tag.tag-two {
  left: -3%;
  bottom: 13%;
  animation-delay: .8s;
}

.home-page .home-trust {
  padding-top: 24px;
  padding-bottom: 16px;
}

.home-page .home-trust-card {
  height: 100%;
  border-radius: 22px;
  border: 1px solid rgba(77, 166, 231, 0.14);
  padding: 28px 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
  box-shadow: 0 14px 30px rgba(16, 64, 110, 0.09);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.home-page .home-trust-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 45px rgba(16, 64, 110, 0.16);
  border-color: rgba(77, 166, 231, 0.34);
}

.home-page .home-trust-card .icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 19px;
  background: linear-gradient(140deg, #4da6e7, #5f84f2);
  box-shadow: 0 10px 18px rgba(77, 166, 231, 0.34);
  margin-bottom: 14px;
}

.home-page .home-trust-card h5 {
  color: #1b2f45;
  margin-bottom: 8px;
}

.home-page .home-trust-card p {
  color: #4f647a;
  margin: 0;
}

.home-page #about #progress-bars {
  margin-top: 10px;
  row-gap: 14px;
}

.home-page #about #progress-bars .skill-item {
  background: linear-gradient(180deg, #ffffff 0%, #f8fcff 100%);
  border: 1px solid rgba(77, 166, 231, 0.14);
  border-radius: 18px;
  padding: 16px 10px 14px;
  box-shadow: 0 12px 24px rgba(16, 64, 110, 0.1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.home-page #about #progress-bars .skill-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 32px rgba(16, 64, 110, 0.14);
  border-color: rgba(77, 166, 231, 0.28);
}

.home-page #about #progress-bars .progress {
  width: 140px;
  height: 140px;
  line-height: 140px;
  margin: 0 auto 2px;
}

.home-page #about #progress-bars .progress:after {
  border-color: #edf4fb;
}

.home-page #about #progress-bars .progress .progress-value {
  color: #1f3550;
  font-size: 33px;
}

.home-page #about #progress-bars .progress .progress-value span {
  color: #7a8da2;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.home-page #about .col-lg-12 > .row {
  display: flex;
  align-items: stretch;
}

.home-page #about .about-left-image {
  height: 100%;
  margin-right: 0;
  margin-top: 0;
}

.home-page #about .about-left-image img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  margin-right: 0;
  margin-top: 0;
}

.home-page #about .about-right-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-bottom: 16px;
}

.home-page #about .about-right-content p:last-of-type {
  margin-bottom: 16px;
}

.home-page #about #progress-bars {
  margin-top: auto;
  align-items: stretch;
}

.home-page #about #progress-bars > [class*="col-"] {
  display: flex;
}

.home-page #about #progress-bars .skill-item {
  width: 100%;
}

@media (max-width: 991px) {
  .home-page .main-banner {
    min-height: auto;
    padding-top: 94px;
    padding-bottom: 20px;
  }

  .home-page .header-area {
    position: sticky !important;
    top: 0;
    height: 82px;
  }

  .home-page .header-area .main-nav {
    min-height: 82px;
  }

  .home-page .header-area .main-nav .logo {
    line-height: 82px;
  }

  .home-page .header-area .logo-img {
    height: 74px;
  }

  .home-page .home-hero-panel {
    padding: 30px 20px;
    border-radius: 24px;
  }

  .home-page .home-hero-actions {
    margin: 16px 0 18px;
  }

  .home-page .home-hero-metrics {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .home-page .home-floating-tag.tag-one {
    right: 0;
  }

  .home-page .home-floating-tag.tag-two {
    left: 0;
  }

  .home-page #about #progress-bars .progress {
    width: 132px;
    height: 132px;
    line-height: 132px;
  }

  .home-page #about .about-left-image img {
    min-height: 420px;
  }
}

@media (max-width: 767px) {
  .home-page .main-banner {
    padding-top: 86px;
    padding-bottom: 16px;
  }

  .home-page .home-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .home-page .home-secondary-btn {
    width: 100%;
  }

  .home-page .home-hero-metrics {
    grid-template-columns: 1fr;
  }

  .home-page .home-floating-tag {
    display: none;
  }

  .home-page #about #progress-bars {
    margin-top: 4px;
  }

  .home-page #about #progress-bars .skill-item {
    max-width: 280px;
    margin: 0 auto;
  }

  .home-page #about .about-left-image img {
    min-height: 300px;
  }
}

/* ---------------------------------------------
Floating Buttons - Final Override
--------------------------------------------- */
.whatsapp-float {
  position: fixed;
  right: 18px !important;
  bottom: 20px !important;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #2bd669, #18b456);
  color: #fff !important;
  font-size: 30px;
  z-index: 1002;
  box-shadow: 0 12px 26px rgba(24, 180, 86, 0.4);
  transform: translateZ(0);
}

.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(36, 200, 96, 0.35);
  animation: whatsapp-pulse 1.9s ease-out infinite;
}

.whatsapp-float i {
  animation: whatsapp-bob 1.7s ease-in-out infinite;
}

.whatsapp-float:hover {
  color: #fff !important;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 16px 30px rgba(24, 180, 86, 0.5);
}

.back-to-top {
  right: 88px !important;
  bottom: 24px !important;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  z-index: 1001;
  background: linear-gradient(135deg, #4da6e7, #5f84f2);
  box-shadow: 0 12px 24px rgba(53, 122, 192, 0.36);
}

@keyframes whatsapp-pulse {
  0% { transform: scale(0.95); opacity: .75; }
  70% { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

@keyframes whatsapp-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@media (max-width: 767px) {
  .whatsapp-float {
    width: 52px;
    height: 52px;
    font-size: 26px;
    right: 12px !important;
    bottom: 14px !important;
  }

  .back-to-top {
    right: 72px !important;
    bottom: 16px !important;
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 21px;
  }
}