/*================================================
GOOGLE FONT
================================================*/
body{
  font-family:'Montserrat',sans-serif;
}

/*--------------------------------------------------------------
# HEADER - GLASS EFFECT FIXED
--------------------------------------------------------------*/
#header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  background: rgba(10, 25, 70, 0.35);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(255,255,255,.08);

  transition: all .4s ease;

  z-index: 997;

  padding: 18px 0;
}

/* Scrolled state */
#header.header-scrolled,
#header.header-inner-pages{
  background:
  linear-gradient(
    to right,
    rgba(183,231,243,.92),
    rgba(1,1,189,.92)
  );

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  padding: 12px 0;
}

/* Logo */
#header .logo img{
  max-height: 42px;
  background: #fff;
  padding: 4px 8px;
  border-radius: 8px;
}

/* Desktop menu */
.navbar a,
.navbar a:focus{
  color: #fff;
  font-weight: 500;
}

/* Better visibility on light pages */
#header:not(.header-scrolled){
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

/*--------------------------------------------------------------
# MOBILE NAV FIX
--------------------------------------------------------------*/
.navbar-mobile{
  position: fixed;
  overflow-y: auto;

  top: 0;
  right: 0;
  left: 0;
  bottom: 0;

  z-index: 9999;

  background: rgba(5, 15, 40, 0.75);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Mobile nav panel */
.navbar-mobile ul{
  background: rgba(255,255,255,.96);

  border-radius: 14px;

  padding: 20px 0;

  top: 70px;
}

/* Mobile links */
.navbar-mobile a{
  color: #223047;
  font-weight: 600;
}


/* This is IMPORTANT */
.navbar-mobile .dropdown > .dropdown-active{
  display: block;
}

/* Hamburger icon */
.mobile-nav-toggle{
  color: #fff;
}

/* Close icon */
.mobile-nav-toggle.bi-x{
  color: #fff;
}

/*================================================
LOGO
================================================*/

#header .logo{
  margin:0;
  padding:0;
  line-height:1;
}

#header .logo img{

  max-height:42px;

  background:#fff;

  padding:8px 16px;

  border-radius:50px;

  border:
  1px solid rgba(0,0,0,.08);

  box-shadow:
  0 4px 18px rgba(0,0,0,.18);

  transition:.3s ease;
}

#header .logo img:hover{

  transform:translateY(-1px);

  box-shadow:
  0 8px 24px rgba(0,0,0,.24);
}
/*================================================
DESKTOP NAVIGATION
================================================*/

.navbar{
  padding:0;
}

.navbar ul{
  margin:0;
  padding:0;

  display:flex;
  list-style:none;
  align-items:center;
}

.navbar li{
  position:relative;
}

.navbar a,
.navbar a:focus{

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:10px 18px;

  font-family:"Poppins",sans-serif;

  font-size:14px;
  font-weight:600;

  color:#fff;

  white-space:nowrap;

  transition:.3s ease;

  position:relative;

  text-transform:uppercase;

  letter-spacing:.4px;
}

.navbar a i,
.navbar a:focus i{
  font-size:12px;
  margin-left:6px;
}

/* HOVER */

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a{

  color:#03faee;
}

/* UNDERLINE EFFECT */

.navbar a::after{

  content:'';

  position:absolute;

  left:18px;
  bottom:6px;

  width:0;

  height:2px;

  background:#03faee;

  border-radius:20px;

  transition:.3s ease;
}

.navbar a:hover::after,
.navbar .active::after{
  width:calc(100% - 36px);
}

/*================================================
DROPDOWN
================================================*/

.navbar .dropdown ul{

  display:block;

  position:absolute;

  left:0;

  top:calc(100% + 18px);

  margin:0;

  padding:10px 0;

  z-index:99;

  opacity:0;
  visibility:hidden;

  min-width:220px;

  background:
  rgba(8,8,20,.97);

  backdrop-filter:blur(14px);

  border-radius:18px;

  box-shadow:
  0 10px 35px rgba(0,0,0,.28);

  transition:.3s ease;
}

.navbar .dropdown ul li{
  min-width:220px;
}

.navbar .dropdown ul a{

  padding:12px 20px;

  font-size:13px;

  text-transform:none;

  font-weight:500;

  color:#fff;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a{

  color:#03faee;

  background:
  rgba(255,255,255,.04);
}

.navbar .dropdown ul a::after{
  display:none;
}

.navbar .dropdown:hover > ul{

  opacity:1;

  top:100%;

  visibility:visible;
}

/*================================================
HOTLINE
================================================*/

.navbar .num{

  color:#03faee !important;

  font-weight:700;
}

.navbar h6{
  color:#fff;
  font-size:11px;
}

/*================================================
MOBILE NAV
================================================*/

.mobile-nav-toggle{

  color:#fff;

  font-size:30px;

  cursor:pointer;

  display:none;

  line-height:0;

  transition:.3s;
}

.mobile-nav-toggle.bi-x{
  color:#fff;
}

@media (max-width:991px){

  .mobile-nav-toggle{
    display:block;
  }

  .navbar ul{
    display:none;
  }
}

/*================================================
MOBILE NAV ACTIVE
================================================*/

.navbar-mobile{

  position:fixed;

  overflow:hidden;

  top:0;
  right:0;
  left:0;
  bottom:0;

  background:
  rgba(0,0,0,.75);

  backdrop-filter:blur(8px);

  transition:.3s;

  z-index:999;
}

.navbar-mobile .mobile-nav-toggle{

  position:absolute;

  top:18px;
  right:18px;
}

.navbar-mobile ul{

  display:block;

  position:absolute;

  top:60px;
  right:15px;
  bottom:15px;
  left:15px;

  padding:14px 0;

  overflow-y:auto;

  background:
  linear-gradient(
    145deg,
    #050510,
    #0a1b5c
  );

  border-radius:22px;

  box-shadow:
  0 10px 40px rgba(0,0,0,.4);
}

.navbar-mobile a,
.navbar-mobile a:focus{

  padding:14px 22px;

  font-size:15px;

  color:#fff;

  text-transform:none;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a{

  color:#03faee;
}

.navbar-mobile a::after{
  display:none;
}



.navbar-mobile .dropdown ul li{
  min-width:200px;
}

.navbar-mobile .dropdown ul a{
  padding:12px 20px;
}

.navbar-mobile .dropdown > .dropdown-active{
  display:block;
}

/*================================================
RESPONSIVE HERO FIX
================================================*/

@media(max-width:991px){

  #hero .carousel-container{

    left:20px;
    right:20px;
    top:70px;
  }

  #hero h2{
    font-size:34px;
  }

  #hero p{
    font-size:15px;
  }
}

@media(max-width:768px){

  #hero h2{
    font-size:28px;
    line-height:1.3;
  }

  #hero p{
    font-size:14px;
  }
}

/*================================================
MOBILE DROPDOWN FIX FOR SAILOR TEMPLATE
================================================*/

@media (max-width: 991px) {
  /* Make header solid on mobile to avoid stacking issues */
  #header {
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: none !important;
  }

  /* Ensure mobile menu panel has proper background */
  .navbar-mobile ul {
    background: linear-gradient(145deg, #0a0a1f, #030318) !important;
  }

  /* Dropdown submenu – hidden by default */
  .navbar-mobile .dropdown ul {
    display: none !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 12px;
    margin: 8px 15px 8px 30px !important;
    padding: 8px 0 !important;
  }


  /* Rotate arrow on open (optional) */
  .navbar-mobile .dropdown > a i.bi-chevron-down {
    transition: transform 0.2s;
  }
  .navbar-mobile .dropdown.dropdown-active > a i.bi-chevron-down {
    transform: rotate(180deg);
  }

  /* Improve tap targets */
  .navbar-mobile a {
    padding: 12px 20px !important;
    font-size: 15px !important;
  }
}

/* Ensure mobile menu is above everything */
.navbar-mobile {
  z-index: 9999 !important;
}
.navbar-mobile ul {
  z-index: 10000 !important;
}

/*================================================
REAL MOBILE DROPDOWN FIX
================================================*/

@media (max-width:991px){

  /* RESET desktop dropdown behavior */
  .navbar-mobile .dropdown ul{

    position: static !important;

    display: none !important;

    opacity: 1 !important;

    visibility: visible !important;

    transform: none !important;

    left: auto !important;

    top: auto !important;

    margin: 10px 15px 10px 30px !important;

    padding: 10px 0 !important;

    min-width: auto !important;

    background: rgba(255,255,255,.06) !important;

    border-radius: 12px;

    box-shadow: none !important;
  }

  /* SHOW submenu when active */
  .navbar-mobile .dropdown > .dropdown-active{

    display: block !important;
  }

  /* Links inside dropdown */
  .navbar-mobile .dropdown ul a{

    padding: 12px 20px !important;

    font-size: 14px;

    color: #fff !important;
  }

  /* Remove desktop hover behavior on mobile */
  .navbar .dropdown:hover > ul{

    opacity: 0;
    visibility: hidden;
  }

  .navbar-mobile .dropdown:hover > ul{

    opacity: 1;
    visibility: visible;
  }
}

/*================================================
HERO

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


#hero{
  width:100%;
  height:100vh;

  overflow:hidden;
  position:relative;

  background:#000;
}

#hero .carousel,
#hero .carousel-inner,
#hero .carousel-item,
#hero .carousel-item::before{
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
}

#hero .carousel-item{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

#hero .carousel-item::before{
  content:"";

  background:
  linear-gradient(
    to right,
    rgba(0,0,0,.82),
    rgba(0,0,0,.55),
    rgba(0,17,80,.45)
  );
}

/*================================================
HERO CONTAINER
================================================*/

#hero .carousel-container{
  display:flex;
  justify-content:center;
  align-items:center;

  position:absolute;

  bottom:0;
  top:70px;
  left:50px;
  right:50px;
}

#hero .container{
  text-align:center;
}

/*================================================
HERO TYPOGRAPHY
================================================*/

#hero h2{
  color:#fff;

  margin-bottom:25px;

  font-size:clamp(2.8rem,5vw,4.8rem);

  font-weight:900;

  line-height:1.05;

  letter-spacing:-1px;

  text-shadow:
  0 4px 20px rgba(0,0,0,.45);
}

#hero h2 span{
  color:#00d9ff;
}

#hero p{
  margin:0 auto 35px auto;

  color:rgba(255,255,255,.88);

  font-size:1.05rem;

  line-height:1.8;

  max-width:850px;
}

/*================================================
BUTTON
================================================*/

#hero .btn-get-started{
  font-family:"Poppins",sans-serif;

  font-weight:600;

  font-size:15px;

  letter-spacing:.5px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  padding:16px 34px;

  border-radius:50px;

  transition:all .4s ease;

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #001eff,
    #00bfff
  );

  box-shadow:
  0 10px 30px rgba(0,81,255,.35);
}

#hero .btn-get-started:hover{
  transform:translateY(-4px);

  box-shadow:
  0 20px 40px rgba(0,81,255,.45);
}

/*================================================
SERVICE BOXES
================================================*/

.icon-box{
  height:180px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  background:
  rgba(255,255,255,.06);

  border:
  1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(10px);

  transition:all .4s ease;

  border-radius:22px;
}

.icon-box:hover{
  transform:translateY(-8px);

  background:
  rgba(0,81,255,.18);

  box-shadow:
  0 20px 40px rgba(0,81,255,.25);
}

.icon-box i{
  font-size:42px;

  color:#00d9ff;

  margin-bottom:16px;

  transition:.4s ease;
}

.icon-box:hover i{
  transform:scale(1.1);
}

.icon-box h3{
  font-size:1.1rem;
  font-weight:700;
}

.icon-box h3 a{
  color:#fff;
  text-decoration:none;
}

/*================================================
LARGE SERVICE BOX
================================================*/

.icon-box.large{
  background:
  linear-gradient(
    135deg,
    rgba(0,81,255,.95),
    rgba(0,191,255,.85)
  );
}

.icon-box.large i{
  color:#fff;
  font-size:46px;
}

/*================================================
CAROUSEL ANIMATIONS
================================================*/

#hero .carousel-inner .carousel-item{
  transition:opacity .8s ease-in-out;
}

#hero .carousel-inner .carousel-item,
#hero .carousel-inner .active.carousel-item-start,
#hero .carousel-inner .active.carousel-item-end{
  opacity:0;
}

#hero .carousel-inner .active,
#hero .carousel-inner .carousel-item-next.carousel-item-start,
#hero .carousel-inner .carousel-item-prev.carousel-item-end{
  opacity:1;
}

#hero .carousel-inner .carousel-item-next,
#hero .carousel-inner .carousel-item-prev,
#hero .carousel-inner .active.carousel-item-start,
#hero .carousel-inner .active.carousel-item-end{
  left:0;
  transform:translate3d(0,0,0);
}

/*================================================
CONTROLS
================================================*/

#hero .carousel-control-next-icon,
#hero .carousel-control-prev-icon{
  background:none;

  font-size:30px;

  width:60px;
  height:60px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
  rgba(255,255,255,.12);

  color:#fff;

  transition:.3s ease;
}

#hero .carousel-control-next-icon:hover,
#hero .carousel-control-prev-icon:hover{
  background:
  rgba(255,255,255,.2);

  transform:scale(1.08);
}

/*================================================
INDICATORS
================================================*/

#hero .carousel-indicators li{
  cursor:pointer;

  width:12px;
  height:12px;

  border-radius:50%;

  background:#fff;

  border:0;

  opacity:.5;

  transition:.3s ease;
}

#hero .carousel-indicators li.active{
  opacity:1;

  background:#00d9ff;

  transform:scale(1.2);
}

/*================================================
RESPONSIVE
================================================*/

@media (max-width: 992px){

  #hero{
    height:100vh;
  }

  #hero .carousel-container{
    top:20px;
    left:20px;
    right:20px;
  }

  .icon-box{
    height:160px;
  }
}

@media (max-width:768px){

  #hero h2{
    font-size:2.4rem;
  }

  #hero p{
    font-size:.95rem;
  }

  .icon-box{
    height:145px;
  }
}

@media (max-height:500px){

  #hero{
    height:120vh;
  }
}




.about .getstarted, .about .getstarted:focus {
  padding:25px 150px;
  margin-top: 50px!important;
  margin-left: 50px;
  top: 30px !important;
  border-radius: 4px;
  font-size: 18px!important;
  font-weight: 800;
  color:#03faee;
  background: transparent;
  border: #03faee solid 1px;

}

.about .getstarted:hover, .about .getstarted:focus:hover {
  color: #000;
  background:#03faee;
}

.do{
  margin-bottom: 45px;
}

.about .php-email-form {
  width: 100%;
  background: transparent;
}

.about .php-email-form .form-group {
  padding-bottom: 8px;
}

.about .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

.about .php-email-form .error-message br + br {
  margin-top: 25px;
}

.about .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}
.about .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}
.about .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}
.about .php-email-form input,.about .php-email-form select,  .about .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  border-radius: 4px;
}
.about .php-email-form input:focus, .about .php-email-form textarea:focus.about .php-email-form input:focus {
  border-color: #0000ff;
}
.about.php-email-form input {
  height: 44px;
}
.about .php-email-form textarea {
  padding: 10px 12px;
}
.about .php-email-form button[type=submit] {
  background: #0000ff;
  border: 0;
  padding: 10px 24px;
  color: #fff;
  transition: 0.4s;
  border-radius: 4px;
}

.about .php-email-form button[type=submit]:hover {
  background: #4a4aff;
}

@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.reg{
  background: #151515;
}

.newwow{
  font-weight: 1200;
  font-size: 60px !important ;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  color: #fff;
  margin-top:50px;
}

.newh6{
  color: #fff;
}


/* ======================================================
# Features Portfolio styling
======================================================== */
.spiral{
  /* background:  url('/assets/img/spiral.png');
  background-size:cover */
  background: #efeffd;
}

/* ===============================================================
# Super Background
============================================================= */

#pricing,#features,#contact,#services,#portfolio,#team,#faq,#cnp{
  /* background-color: #f4f4fd !important; */
  background: linear-gradient(to left, rgb(244, 244, 253) , rgba(244, 244, 253,0.9)),  url('/assets/img/slide/slide-1.jpg') !important;
  background-size:cover; 
}

.faq .faq-item i {
  color:#151515
}

/* ===========================================================
# Clients & Partners Page
=========================================================== */

#cnp{
  padding:100px 0;
  background:#efefdf;
  position:relative;
  overflow:hidden;
}

/* subtle background texture */
#cnp::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left, rgba(0,23,168,.05), transparent 25%),
    radial-gradient(circle at bottom right, rgba(3,250,238,.08), transparent 25%);
  pointer-events:none;
}

#cnp .container{
  position:relative;
  z-index:2;
}

/* section heading */
#cnp .section-title h2{
  color:#00174d;
}

#cnp .section-title p{
  color:#5d6785;
}

/* grid spacing */
#cnp .row{
  row-gap:30px;
}

/* logo card */
#cnp .icon-box{
  height:160px;
  width:100%;
  max-width:190px;

  margin:auto;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;

  border-radius:22px;

  background:rgba(255,255,255,.85);

  border:1px solid rgba(0,23,168,.08);

  box-shadow:
    0 10px 30px rgba(0,0,0,.06);

  transition:.35s ease;
}

/* hover */
#cnp .icon-box:hover{
  transform:translateY(-8px);
  box-shadow:
    0 18px 40px rgba(0,23,168,.14);
  border-color:#03faee;
}

/* images */
#cnp .icon-box img{
  width:100%;
  max-width:140px;
  height:auto;

  object-fit:contain;

  filter:grayscale(15%);
  transition:.35s ease;
}

/* image hover */
#cnp .icon-box:hover img{
  transform:scale(1.06);
  filter:grayscale(0%);
}

/* larger logo support */
#cnp .icon-box.large img{
  max-width:155px;
}

/* tablet */
@media (max-width:768px){

  #cnp{
    padding:80px 0;
  }

  #cnp .icon-box{
    max-width:170px;
    height:145px;
  }

  #cnp .icon-box img{
    max-width:120px;
  }
}

/* mobile */
@media (max-width:576px){

  #cnp .icon-box{
    max-width:160px;
    height:140px;
    padding:18px;
  }

  #cnp .icon-box img{
    max-width:110px;
  }
}
/* ===============================================================
#Training styles
=============================================================== */

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  background-color: #efeffd;
 }
 
/* 
 =============================================================

 #Contact styles
 =========================================================== */

 .contact .info i {
  background-color: #ddd;
}



/*================================================
FOOTER - MODERN GLASS STYLE
================================================*/

#footer{
  background:#020617;
  color:#fff;
  position:relative;
  overflow:hidden;
}

/* TOP FOOTER */
#footer .footer-top{

  background:
  linear-gradient(
    135deg,
    rgba(8,15,40,0.96),
    rgba(4,25,90,0.96)
  );

  padding:70px 0 40px;

  position:relative;

  border-top:
  1px solid rgba(255,255,255,.05);
}

/* subtle glow */
#footer .footer-top::before{

  content:"";

  position:absolute;

  width:350px;
  height:350px;

  background:
  radial-gradient(
    rgba(3,250,238,.12),
    transparent 70%
  );

  top:-120px;
  right:-100px;

  pointer-events:none;
}

/*================================================
LOGO
================================================*/

.down-img{

  width:160px;

  background:#fff;

  padding:10px 18px;

  border-radius:50px;

  box-shadow:
  0 8px 25px rgba(0,0,0,.25);

  margin-bottom:20px;
}

/*================================================
TEXT
================================================*/

#footer .footer-top p,
#footer .footer-top li,
#footer .footer-top a{

  color:
  rgba(255,255,255,.82);

  font-size:14px;

  line-height:1.8;
}

#footer .footer-top strong{
  color:#03faee;
}

/*================================================
HEADINGS
================================================*/

#footer .footer-top h4{

  color:#fff;

  font-size:20px;

  font-weight:700;

  margin-bottom:22px;

  position:relative;

  padding-bottom:12px;
}

#footer .footer-top h4::after{

  content:"";

  position:absolute;

  left:0;
  bottom:0;

  width:55px;
  height:3px;

  border-radius:20px;

  background:#03faee;
}

/*================================================
LINKS
================================================*/

#footer .footer-links ul{

  list-style:none;

  padding:0;
  margin:0;
}

#footer .footer-links ul li{

  padding:8px 0;

  display:flex;
  align-items:center;
}

#footer .footer-links ul i{

  color:#03faee;

  margin-right:10px;

  font-size:14px;
}

#footer .footer-links ul a{

  transition:.3s ease;
}

#footer .footer-links ul a:hover{

  color:#03faee;

  padding-left:4px;
}

/*================================================
SOCIAL ICONS
================================================*/

#footer .social-links{

  margin-top:20px;

  display:flex;
  gap:12px;
}

#footer .social-links a{

  width:42px;
  height:42px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
  rgba(255,255,255,.08);

  border:
  1px solid rgba(255,255,255,.08);

  transition:.3s ease;

  font-size:18px;

  color:#fff;
}

#footer .social-links a:hover{

  background:#03faee;

  color:#001233;

  transform:translateY(-4px);
}

/*================================================
FOOTER
================================================*/

#footer{
  background:#050816;
  color:#fff;
}

/* TOP FOOTER */
#footer .footer-top{
  background:
  linear-gradient(
    135deg,
    rgba(183,231,243,.12),
    rgba(1,1,189,.18)
  );

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  padding:70px 0 40px;

  border-top:
  1px solid rgba(255,255,255,.06);
}

/* LOGO */
.down-img{
  width:160px;
  height:auto;

  padding:10px;

  background:rgba(255,255,255,.95);

  border-radius:16px;

  box-shadow:
  0 8px 24px rgba(0,0,0,.15);
}

/* FOOTER INFO */
#footer .footer-info{
  margin-top:20px;
  color:#d7def5;
}

#footer .footer-info p{
  line-height:1.9;
  font-size:14px;
  color:#d7def5 !important;
}

/* TITLES */
#footer h4{
  color:#fff !important;

  font-size:18px;
  font-weight:700;

  margin-bottom:22px;

  position:relative;
}

#footer h4::after{
  content:"";

  width:45px;
  height:3px;

  background:#03faee;

  position:absolute;

  left:0;
  bottom:-8px;

  border-radius:20px;
}

/* LINKS */
#footer .footer-links ul{
  list-style:none;
  padding:0;
  margin:0;
}

#footer .footer-links ul li{
  padding:10px 0;
}

#footer .footer-links ul i{
  color:#03faee !important;
  margin-right:8px;
}

#footer .footer-links ul a{
  color:#d7def5 !important;

  transition:.3s ease;

  font-size:14px;
}

#footer .footer-links ul a:hover{
  color:#03faee !important;

  padding-left:5px;
}

/* SOCIAL ICONS */
#footer .social-links{
  margin-top:20px;
}

#footer .social-links a{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:40px;
  height:40px;

  margin-right:10px;

  border-radius:50%;

  background:
  rgba(255,255,255,.08);

  color:#fff;

  transition:.3s ease;

  backdrop-filter:blur(8px);
}

#footer .social-links a:hover{

  background:#03faee;

  color:#04112b;

  transform:translateY(-4px);
}

/*================================================
NEWSLETTER FORM - FORCED STYLES
================================================*/

/* Override any existing styles */
#footer .footer-newsletter form {
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  border-radius: 50px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(12px) !important;
  padding: 6px !important;
  margin-top: 20px !important;
}

/* Email input - remove ALL borders/outlines */
#footer .footer-newsletter form input[type="email"] {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 14px !important;
  padding: 14px 18px !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Submit button - gradient + visible */
#footer .footer-newsletter form input[type="submit"] {
  border: none !important;
  background: linear-gradient(135deg, #03faee, #00b7ff) !important;
  color: #04112b !important;
  font-weight: 700 !important;
  padding: 14px 24px !important;
  border-radius: 40px !important;
  cursor: pointer !important;
  transition: 0.3s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-size: 13px !important;
  display: inline-block !important;
}

/* Button hover */
#footer .footer-newsletter form input[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(3, 250, 238, 0.35) !important;
}

/* Success message styling */
#footer .alert-success {
  margin-top: 15px !important;
  border-radius: 12px !important;
  border: none !important;
  background: #0dcf83 !important;
  color: #fff !important;
  padding: 10px 15px !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  #footer .footer-newsletter form {
    flex-direction: column !important;
    border-radius: 20px !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
  }
  #footer .footer-newsletter form input[type="email"] {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50px !important;
    text-align: center !important;
  }
  #footer .footer-newsletter form input[type="submit"] {
    width: 100% !important;
    text-align: center !important;
  }
}

/*================================================
BOTTOM COPYRIGHT AREA
================================================*/

#footer .copyright{

  text-align:center;

  padding:22px 0;

  border-top:
  1px solid rgba(255,255,255,.06);

  color:
  rgba(255,255,255,.65);

  font-size:14px;
}

/*================================================
RESPONSIVE
================================================*/

@media(max-width:991px){

  #footer .footer-top{
    text-align:center;
  }

  #footer .footer-top h4::after{

    left:50%;

    transform:translateX(-50%);
  }

  #footer .social-links{
    justify-content:center;
  }

  .down-img{
    margin:auto auto 20px;
    display:block;
  }
}

@media(max-width:768px){

  #footer .footer-top{
    padding:60px 0 30px;
  }

  #footer .footer-info,
  #footer .footer-links,
  #footer .footer-newsletter{

    margin-bottom:40px;
  }

  #footer .footer-newsletter form{

    flex-direction:column;

    border-radius:20px;
  }

  #footer .footer-newsletter input[type=submit]{

    width:100%;

    margin-top:10px;
  }
}

/* ==========================================
FOOTER MOBILE ALIGNMENT FIX
========================================== */

@media(max-width:768px){

  #footer .footer-top{
    text-align:center;
  }

  .footer-info{
    margin-left:0 !important;
  }

  #footer .footer-links{
    text-align:center;
    margin-top:25px;
  }

  #footer .footer-links ul{
    padding-left:0;
    list-style:none;
  }

  #footer .footer-links ul li{
    justify-content:center;
    display:flex;
    align-items:center;
  }

  #footer .footer-links ul li i{
    margin-right:6px;
  }

  #footer .footer-newsletter{
    text-align:center;
    margin-top:25px;
  }

  .down-img{
    display:block;
    margin:0 auto 20px;
  }

}
/* ==============================================================
# Alerts
============================================================== */

.alert-danger{
  background-color: #ff9191;
  color: #a00303;
  border: 1px solid #a00303;
}

.alert-danger ol,.alert-danger h6{ 
  text-align: left;
  list-style-position:outside;
}

.alert-success{
  background-color: #bdff91;
  color: #105c01;
  border: 1px solid #105c01;
}

/*================================================
TESTIMONIALS
================================================*/

#testimonials{

  position:relative;

  padding:120px 0;

  background:
  linear-gradient(
    135deg,
    rgba(183,231,243,.12),
    rgba(1,1,189,.18)
  ),
  url('/assets/img/spiral.png');

  background-size:cover;
  background-position:center;

  overflow:hidden;
}

/* DARK OVERLAY */
#testimonials::before{

  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    to bottom,
    rgba(3,8,25,.82),
    rgba(4,12,38,.9)
  );

  z-index:1;
}

/* CONTENT ABOVE OVERLAY */
#testimonials .container{
  position:relative;
  z-index:2;
}

/* SECTION TITLE */
#testimonials .section-title h2{
  color:#03faee;
}

#testimonials .section-title p{
  color:#ffffff;
}

/*================================================
SLIDER
================================================*/

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider{
  overflow:hidden;
}

/*================================================
TESTIMONIAL CARD
================================================*/

.testimonials .testimonial-item{

  box-sizing:content-box;

  padding:35px;

  margin:25px 15px;

  min-height:260px;

  position:relative;

  border-radius:24px;

  overflow:hidden;

  background:
  rgba(255,255,255,.08);

  border:
  1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(14px);

  -webkit-backdrop-filter:blur(14px);

  box-shadow:
  0 12px 40px rgba(0,0,0,.28);

  transition:.4s ease;
}

/* GLOW EFFECT */
.testimonials .testimonial-item::before{

  content:"";

  position:absolute;

  width:180px;
  height:180px;

  background:
  radial-gradient(
    rgba(3,250,238,.18),
    transparent 70%
  );

  top:-60px;
  right:-60px;

  z-index:0;
}

/* HOVER */
.testimonials .testimonial-item:hover{

  transform:translateY(-8px);

  border-color:
  rgba(3,250,238,.28);

  box-shadow:
  0 18px 50px rgba(0,0,0,.35);
}

/* CONTENT ABOVE GLOW */
.testimonials .testimonial-item *{
  position:relative;
  z-index:2;
}

/*================================================
IMAGE
================================================*/

.testimonials .testimonial-item .testimonial-img{

  width:90px;
  height:90px;

  object-fit:cover;

  border-radius:50%;

  border:4px solid #03faee;

  margin:0 15px 15px 0;

  float:left;

  box-shadow:
  0 6px 18px rgba(3,250,238,.25);
}

/*================================================
TEXT
================================================*/

.testimonials .testimonial-item h3{

  font-size:20px;

  font-weight:700;

  margin:22px 0 5px 0;

  color:#fff;
}

.testimonials .testimonial-item h4{

  font-size:14px;

  color:#03faee;

  margin:0 0 15px;
}

.testimonials .testimonial-item p{

  font-style:italic;

  line-height:1.8;

  color:#dbe7ff;

  margin-top:25px;
}

/*================================================
QUOTE ICONS
================================================*/

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right{

  color:#03faee;

  font-size:24px;
}

.testimonials .testimonial-item .quote-icon-left{

  position:relative;

  left:-4px;
}

.testimonials .testimonial-item .quote-icon-right{

  position:relative;

  right:-4px;

  top:8px;
}

/*================================================
PAGINATION
================================================*/

.testimonials .swiper-pagination{

  margin-top:20px;

  position:relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet{

  width:12px;
  height:12px;

  opacity:1;

  background:
  rgba(255,255,255,.25);

  border:none;

  transition:.3s ease;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active{

  width:30px;

  border-radius:20px;

  background:#03faee;
}

/*================================================
RESPONSIVE
================================================*/

@media(max-width:768px){

  .testimonials .testimonial-item{

    padding:28px 22px;

    min-height:auto;

    text-align:center;
  }

  .testimonials .testimonial-item .testimonial-img{

    float:none;

    margin:0 auto 20px;
  }

  .testimonials .testimonial-item h3{
    margin-top:0;
  }
}

/*--------------------------------------------------------------
# About (serv) – Structure Preserved, Site Colors Applied
--------------------------------------------------------------*/
#serv {
  background: linear-gradient(135deg, #07162e 0%, #0b4bb3 55%, #19b6ff 100%);
  padding: 120px 0;
  color: #fff;
}

#serv:before {
  content: "";
  background: rgba(3, 10, 30, 0.7) !important;
  position: relative;
  bottom: 60px;
  top: 60px;
  left: 0;
  right: 0;
  transform: skewY(-3deg);
}

#serv .container {
  position: relative;
  z-index: 10;
}

#serv .content {
  padding: 30px 30px 30px 0;
}

#serv .content h3 {
  font-weight: 700;
  font-size: 34px;
  margin-bottom: 30px;
  color: #ffffff;
}

#serv .content h3,
#serv .content h4 {
  color: #00d9ff;
}

#serv .content p {
  color: rgba(255,255,255,0.9);
  margin-bottom: 30px;
}

.hh {
  color: #ffffff !important;
}

#serv .content .about-btn {
  padding: 8px 30px 9px 30px;
  color: #fff;
  border-radius: 50px;
  transition: 0.3s;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  border: 2px solid #00d9ff;
  margin-top: 2em;
  background: transparent;
}

#serv .content .about-btn i {
  font-size: 16px;
  padding-left: 5px;
}

#serv .content .about-btn:hover {
  background: #00d9ff;
  border-color: #00d9ff;
  color: #07162e;
}

/* ========== FIXED CARD STYLES (unchanged structure) ========== */
#serv .icon-boxes .icon-box {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  min-height: 200px;
  height: auto;
  transition: 0.3s;
}

#serv .icon-boxes .icon-box:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-5px);
}

#serv .icon-boxes .icon-box i {
  font-size: 40px;
  color: #00d9ff;
  margin-bottom: 15px;
  display: block;
}

#serv .icon-boxes .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: #ffffff;
}

#serv .icon-boxes .icon-box p {
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  margin: 0;
  line-height: 1.5;
}

/* Fix column layout – two cards per row, with bottom margins */
#serv .icon-boxes .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

#serv .icon-boxes .col-md-6 {
  flex: 0 0 calc(50% - 20px);
  max-width: calc(50% - 20px);
  margin: 0 10px 30px 10px;
  max-height: none;
}

@media (max-width: 1200px) {
  #serv .content {
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  #serv {
    text-align: center;
  }
  #serv .icon-boxes .col-md-6 {
    flex: 0 0 calc(100% - 20px);
    max-width: calc(100% - 20px);
    margin-bottom: 25px;
  }
}
  .abtbg{
  height:80vh;
  /* border-radius:25px; */
}

.about .getstarted, .about .getstarted:focus {
  padding:25px 80px;
}



#contact .info,#contact form{
  background: transparent;
}

option:active,option:focus,option:hover{
  background-color: #18d26e !important;
}

::selection{
  background-color: #18d26e !important;
}

::-moz-selection{
  background-color: #18d26e !important;
}

select{
  word-wrap: initial;
  -swiper-theme-color: #000307;
}


/*================================================
COUNTS SECTION — PREMIUM GLASS STYLE
================================================*/

.counts{

  position:relative;

  padding:120px 0 90px;

  overflow:hidden;

  background:
  linear-gradient(
    135deg,
    #eef4ff 0%,
    #dce8ff 45%,
    #eef2ff 100%
  );
}

/* Decorative glow effects */

.counts::before{

  content:"";

  position:absolute;

  width:420px;
  height:420px;

  border-radius:50%;

  background:
  radial-gradient(
    rgba(3,250,238,.18),
    transparent 70%
  );

  top:-180px;
  right:-120px;

  z-index:0;
}

.counts::after{

  content:"";

  position:absolute;

  width:350px;
  height:350px;

  border-radius:50%;

  background:
  radial-gradient(
    rgba(0,87,255,.12),
    transparent 70%
  );

  bottom:-180px;
  left:-100px;

  z-index:0;
}

/* Keep content above glow */

.counts .container{
  position:relative;
  z-index:2;
}

/* spacing */

.counts .row{
  row-gap:55px;
}

/*================================================
COUNT BOX
================================================*/

.counts .count-box{

  position:relative;

  padding:68px 28px 38px;

  width:100%;

  text-align:center;

  border-radius:30px;

  overflow:visible;

  background:
  rgba(255,255,255,.55);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  border:
  1px solid rgba(255,255,255,.65);

  box-shadow:
  0 12px 38px rgba(0,0,0,.08);

  transition:.35s ease;
}

/* top accent line */

.counts .count-box::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:4px;

  border-radius:30px 30px 0 0;

  background:
  linear-gradient(
    to right,
    #03faee,
    #004cff
  );
}

/* hover */

.counts .count-box:hover{

  transform:
  translateY(-12px);

  box-shadow:
  0 24px 50px rgba(0,0,0,.14);
}

/*================================================
FLOATING ICON
================================================*/

.counts .count-box i{

  position:absolute;

  width:82px;
  height:82px;

  top:-41px;
  left:50%;

  transform:translateX(-50%);

  z-index:5;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  font-size:34px;

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #03faee,
    #005dff
  );

  border:
  6px solid #eef4ff;

  box-shadow:
  0 15px 35px rgba(0,93,255,.28);
}

/*================================================
COUNT NUMBER
================================================*/

.counts .count-box span{

  display:block;

  font-size:48px;

  font-weight:800;

  line-height:1;

  margin-bottom:14px;

  background:
  linear-gradient(
    135deg,
    #04112b,
    #004cff
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/*================================================
TEXT
================================================*/

.counts .count-box p{

  margin:0;

  font-size:15px;

  font-weight:600;

  letter-spacing:.5px;

  text-transform:uppercase;

  color:#4f5c7f;
}

/*================================================
RESPONSIVE
================================================*/

@media(max-width:991px){

  .counts{
    padding:100px 0 80px;
  }

  .counts .count-box{
    padding:65px 24px 34px;
  }

  .counts .count-box span{
    font-size:42px;
  }
}

@media(max-width:768px){

  .counts{
    text-align:center;
  }

  .counts .row{
    row-gap:65px;
  }

  .counts .count-box{

    border-radius:26px;

    padding:62px 22px 32px;
  }

  .counts .count-box i{

    width:76px;
    height:76px;

    top:-38px;

    font-size:30px;
  }

  .counts .count-box span{
    font-size:38px;
  }

  .counts .count-box p{
    font-size:14px;
  }
}

.form-control.is-invalid:focus, .was-validated.form-control:invalid:focus {
 box-shadow: none;
 border:1px solid #000;
}

.member-info a{
  text-decoration: none;
  color: #000 !important;
}

.member-info a :hover{
  text-decoration: none;
  color: #464646 !important;
}

/*================================================
ABOUT SECTION — PREMIUM MODERN REDESIGN
================================================*/

#about{

  position:relative;

  overflow:hidden;

  padding:110px 0;

  background:
  radial-gradient(
    circle at top left,
    rgba(0,72,255,0.25),
    transparent 30%
  ),
  radial-gradient(
    circle at bottom right,
    rgba(0,0,0,0.8),
    transparent 40%
  ),
  linear-gradient(
    135deg,
    #000 0%,
    #05053d 50%,
    #0017a8 100%
  );
}

/*================================================
BACKGROUND GLOWS
================================================*/

#about::before,
#about::after{

  content:'';

  position:absolute;

  border-radius:50%;

  filter:blur(90px);

  z-index:0;
}

#about::before{

  width:320px;
  height:320px;

  background:
  rgba(0,140,255,0.22);

  top:-120px;
  left:-120px;
}

#about::after{

  width:260px;
  height:260px;

  background:
  rgba(3,250,238,0.12);

  bottom:-100px;
  right:-100px;
}

/*================================================
CONTENT ABOVE EFFECTS
================================================*/

#about .container{

  position:relative;

  z-index:2;
}

/*================================================
SECTION TITLE
================================================*/

#about .section-title{

  text-align:center;

  margin-bottom:70px;
}

#about .section-title h2{

  color:#03faee !important;

  font-size:15px;

  font-weight:700;

  letter-spacing:3px;

  text-transform:uppercase;

  margin-bottom:14px;
}

#about .section-title p{

  color:#fff !important;

  font-size:42px;

  font-weight:800;

  line-height:1.2;

  margin:0;
}

/*================================================
GRID SPACING
================================================*/

#about .row.content{

  row-gap:40px;
}

/*================================================
GLASS CARDS
================================================*/

#about .col-lg-6{

  position:relative;

  padding:40px;

  border-radius:28px;

  overflow:hidden;

  background:
  rgba(255,255,255,.06);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  border:
  1px solid rgba(255,255,255,.08);

  box-shadow:
  0 12px 40px rgba(0,0,0,.18);

  transition:.35s ease;
}

/* hover effect */

#about .col-lg-6:hover{

  transform:
  translateY(-8px);

  border:
  1px solid rgba(3,250,238,.22);

  box-shadow:
  0 20px 45px rgba(0,0,0,.28);
}

/* subtle shine */

#about .col-lg-6::before{

  content:'';

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    120deg,
    rgba(255,255,255,.06),
    transparent 45%
  );

  pointer-events:none;
}

/*================================================
TYPOGRAPHY
================================================*/

.about h2,
.about h3{

  color:#fff !important;

  font-weight:700;

  margin-bottom:20px;
}

.about h2.wow{

  font-size:42px;

  line-height:1.2;

  margin-bottom:24px;
}

.about h3{

  font-size:26px;

  color:#03faee !important;
}

.about p,
.about li{

  color:
  rgba(255,255,255,.88) !important;

  font-size:15px;

  line-height:1.9;
}

/*================================================
LIST STYLING
================================================*/

.about ul{

  list-style:none;

  padding:0;

  margin-top:20px;
}

.about ul li{

  position:relative;

  padding-left:34px;

  margin-bottom:18px;
}

.about ul li i{

  position:absolute;

  left:0;
  top:4px;

  font-size:20px;

  color:#03faee;
}

/*================================================
IMAGES
================================================*/

#about img{

  width:100%;

  border-radius:24px;

  object-fit:cover;

  transition:.4s ease;

  box-shadow:
  0 15px 40px rgba(0,0,0,.25);
}

#about img:hover{

  transform:scale(1.02);
}


#about{
  margin-top: 0px !important;
}

/*================================================
MISSION / VISION
================================================*/

.bolder{

  position:relative;

  z-index:2;
}

/*================================================
SKILLS SECTION
================================================*/

#skills{

  position:relative;

  padding:110px 0;

  background:
  linear-gradient(
    135deg,
    #eef4ff 0%,
    #dce7ff 50%,
    #f8fbff 100%
  );

  overflow:hidden;
}

/* background glows */

#skills::before{

  content:'';

  position:absolute;

  width:350px;
  height:350px;

  border-radius:50%;

  background:
  radial-gradient(
    rgba(0,89,255,.12),
    transparent 70%
  );

  top:-150px;
  right:-100px;
}

/* title */

#skills .section-title{

  text-align:center;

  margin-bottom:60px;
}

#skills .section-title h2{

  color:#0055ff;

  font-size:15px;

  font-weight:700;

  letter-spacing:3px;

  text-transform:uppercase;
}

#skills .section-title p{

  font-size:38px;

  font-weight:800;

  color:#04112b;
}

/*================================================
SKILL BLOCK
================================================*/

.skills .progress{

  height:auto;

  background:
  rgba(255,255,255,.7);

  padding:22px;

  border-radius:22px;

  margin-bottom:28px;

  box-shadow:
  0 10px 30px rgba(0,0,0,.06);

  transition:.3s ease;
}

.skills .progress:hover{

  transform:
  translateY(-5px);
}

/* label */

.skills .progress .skill{

  display:flex;

  justify-content:space-between;

  margin-bottom:14px;

  font-size:15px;

  font-weight:700;

  color:#04112b;

  text-transform:uppercase;
}

/* value */

.skills .progress .skill .val{

  color:#005dff;
}

/* bar wrap */

.skills .progress-bar-wrap{

  width:100%;

  height:12px;

  border-radius:30px;

  overflow:hidden;

  background:
  rgba(0,0,0,.08);
}

/* actual bar */

.skills .progress-bar{

  height:100%;

  border-radius:30px;

  background:
  linear-gradient(
    90deg,
    #03faee,
    #005dff
  );

  transition:1.4s ease;
}

/*================================================
RESPONSIVE
================================================*/

@media(max-width:991px){

  #about{
    padding:90px 0;
  }

  #about .section-title p{
    font-size:34px;
  }

  .about h2.wow{
    font-size:34px;
  }

  #about .col-lg-6{
    padding:32px;
  }

  #skills{
    padding:90px 0;
  }

  #skills .section-title p{
    font-size:32px;
  }
}

@media(max-width:768px){

  #about{
    text-align:center;
  }

  #about .section-title{
    margin-bottom:50px;
  }

  #about .section-title p{
    font-size:28px;
  }

  .about h2.wow{
    font-size:28px;
  }

  #about .col-lg-6{

    padding:28px 22px;

    border-radius:24px;
  }

  .about ul li{

    padding-left:0;

    text-align:left;
  }

  .about ul li i{
    position:relative;
    top:2px;
    margin-right:10px;
  }

  #skills .section-title p{
    font-size:28px;
  }

  .skills .progress{
    padding:20px;
  }
}

/* ===========================
RESTORE ABOUT HERO LEFT BANNER
=========================== */

#about .abtbg{
    position: relative;
    overflow:hidden;
    padding:70px 50px!important;
    min-height:650px;
    display:flex;
    align-items:center;
    justify-content:center;

    background:
    linear-gradient(
      to right,
      rgba(0,0,0,0.88),
      rgba(0,0,0,0.45)
    ),
    url('/assets/img/slide/lap.jpg') !important;

    background-size:cover !important;
    background-position:center !important;
    background-repeat:no-repeat !important;

    border-radius:30px 0 0 30px !important;
    box-shadow:none;
}

#about .abtbg::before{
    content:'';
    position:absolute;
    inset:0;

    background:
    linear-gradient(
      120deg,
      rgba(0,81,255,0.15),
      transparent,
      rgba(0,255,255,0.08)
    );

    animation: shimmer 8s linear infinite;
    z-index:1;
}

#about .abtbg .hero-inner{
    position:relative;
    z-index:2;
}


@keyframes shimmer{
    0%{
        transform:translateX(-100%);
    }
    100%{
        transform:translateX(100%);
    }
}

.hero-inner{
    position:relative;
    z-index:2;
}

.preline,
.line,
.line-large,
.huge,
.subline{
    font-family:'Montserrat',sans-serif;
    text-transform:uppercase;
    letter-spacing:1px;
}

/* small heading */
.preline{
    font-size:2rem;
    font-weight:600;
    color:#00fff2;
    display:block;
    text-align:center;
    margin-bottom:10px;
}

/* middle line */
.line{
    font-size:3rem;
    font-weight:900;
    color:#00d9ff;
    display:block;
    text-align:center;
    line-height:1;
}

/* giant text */
.huge{
    font-size:5.5rem;
    font-weight:900;
    color:#fff;
    display:block;
    text-align:center;
    line-height:0.95;
    text-shadow:
    0 0 10px rgba(255,255,255,0.15),
    0 0 30px rgba(0,140,255,0.3);
    margin:20px 0;
}

/* lower text */
.subline{
    font-size:1.8rem;
    font-weight:600;
    color:#00fff2;
    display:block;
    text-align:center;
    line-height:1.3;
}

/* ===========================
BUTTON
=========================== */

.cta-outline{
    position:relative;
    overflow:hidden;

    display:flex!important;
    justify-content:center!important;
    align-items:center!important;

    width:100%;
    max-width:220px;

    padding:16px 20px;
    margin:auto;
    margin-top:40px!important;

    border-radius:60px;

    font-size:18px;
    font-weight:700;
    letter-spacing:1px;
    text-decoration:none;

    color:#00fff2;
    border:1px solid rgba(0,255,242,0.5);

    backdrop-filter:blur(8px);

    transition:all .4s ease;
}

.cta-outline::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.2),
    transparent);

    transition:.6s;
}

.cta-outline:hover::before{
    left:100%;
}

.cta-outline:hover{
    background:#00fff2;
    color:#000;
    transform:translateY(-4px);
    box-shadow:0 10px 30px rgba(0,255,242,0.35);
}

/* ===========================
RIGHT SIDE FORM
=========================== */

.reg{
    padding:60px 45px!important;

    background:
    linear-gradient(
    135deg,
    rgba(10,10,10,0.92),
    rgba(0,23,168,0.82));

    backdrop-filter:blur(14px);

    border-radius:0 30px 30px 0;

    box-shadow:
    0 0 30px rgba(0,0,0,0.35),
    inset 0 0 1px rgba(255,255,255,0.08);
}

.newwow{
    font-size:4.5rem;
    font-weight:900;
    color:#fff;
    margin-bottom:5px;
    line-height:1;
}

.newh6{
    color:#d7d7d7;
    margin-bottom:35px;
    font-size:1rem;
}

/* inputs */

.php-email-form input,
.php-email-form select{
    height:58px;
    border:none!important;
    border-radius:14px!important;

    background:rgba(255,255,255,0.08)!important;

    color:#fff!important;

    padding-left:18px!important;

    backdrop-filter:blur(8px);

    transition:all .3s ease;
}

.php-email-form input::placeholder{
    color:#d9d9d9;
}

.php-email-form input:focus,
.php-email-form select:focus{
    background:rgba(255,255,255,0.12)!important;
    box-shadow:0 0 0 3px rgba(0,140,255,0.25)!important;
    transform:translateY(-2px);
}

/* select text */
.php-email-form select{
    color:#dcdcdc!important;
}

/* submit button */

.php-email-form button{
    background:linear-gradient(
    135deg,
    #0051ff,
    #00bfff);

    border:none;
    padding:14px 40px;

    border-radius:50px;

    color:#fff;
    font-size:16px;
    font-weight:700;

    transition:all .3s ease;
}

.php-email-form button:hover{
    transform:translateY(-3px) scale(1.03);
    box-shadow:0 10px 25px rgba(0,119,255,0.45);
}

.cta-arrow{
    transition:transform .3s ease;
}

.cta-outline:hover .cta-arrow{
    transform:translateX(6px);
}

/* ===========================
RESPONSIVE
=========================== */

@media(max-width:991px){

    .abtbg{
        border-radius:25px 25px 0 0;
        min-height:auto;
        padding:60px 25px!important;
    }

    .reg{
        border-radius:0 0 25px 25px;
        padding:50px 25px!important;
    }

    .huge{
        font-size:4rem;
    }

    .line{
        font-size:2.2rem;
    }

    .newwow{
        font-size:3rem;
    }
}

@media(max-width:576px){

    .huge{
        font-size:3rem;
    }

    .line{
        font-size:1.8rem;
    }

    .subline{
        font-size:1.2rem;
    }

    .preline{
        font-size:1.5rem;
    }

    .newwow{
        font-size:2.5rem;
    }
}

/* #main{
  margin-top:50px;
} */

.about p,.about h2,.about h3,.about p,.about li{
  color: #fff !important;
}

.about .content ul i {
     color:#00bfff;
}

.php-email-form select > option{
 color:#000 !important;
}

/*================================================
CLIENTS SECTION - REFINED
================================================*/

#clients{
  background:#efeffd;

  padding:80px 0;

  position:relative;

  overflow:hidden;
}

/* subtle top/bottom separation */
#clients::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:1px;

  background:
  linear-gradient(
    to right,
    transparent,
    rgba(0,0,0,.08),
    transparent
  );
}

/* slider alignment */
#clients .swiper-wrapper{
  align-items:center;
}

/* each slide */
#clients .swiper-slide{

  display:flex;

  justify-content:center;

  align-items:center;

  padding:20px;
}

/* logo styling */
#clients img{

  width:100%;

  max-width:180px;

  height:auto;

  object-fit:contain;

  transition:all .35s ease;

  filter:
  grayscale(100%)
  opacity(.75);

  transform:scale(.96);
}

/* hover effect */
#clients img:hover{

  filter:
  grayscale(0%)
  opacity(1);

  transform:scale(1.04);
}

/* swiper bullets */
#clients .swiper-pagination{

  margin-top:28px;

  position:relative;
}

#clients .swiper-pagination-bullet{

  width:10px;
  height:10px;

  background:
  rgba(0,0,0,.2);

  opacity:1;

  transition:.3s ease;
}

#clients .swiper-pagination-bullet-active{

  width:28px;

  border-radius:30px;

  background:
  linear-gradient(
    90deg,
    #03faee,
    #0011bd
  );
}

/* mobile */
@media(max-width:768px){

  #clients{
    padding:60px 0;
  }

  #clients .swiper-slide{
    padding:12px;
  }

  #clients img{

    max-width:140px;

    width:100%;
  }
}

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/

#services{
  position:relative;
  padding:100px 0;
  background:
    linear-gradient(135deg, rgba(239,239,223,.96), rgba(230,238,255,.96)),
    url('/assets/img/spiral.png');
  background-size:cover;
  background-position:center;
  overflow:hidden;
}

#services .row{
  row-gap:28px;
}

.services .icon-box{
  position:relative;
  height:100%;
  min-height:220px;
  padding:35px 30px 30px 95px;
  border-radius:24px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(0,23,168,.10);
  box-shadow:0 12px 35px rgba(0,0,0,.08);
  transition:.35s ease;
  overflow:hidden;
}

.services .icon-box::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:5px;
  height:100%;
  background:linear-gradient(to bottom,#03faee,#0017a8);
}

.services .icon-box:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 45px rgba(0,23,168,.16);
}

.services .icon-box i{
  position:absolute;
  top:34px;
  left:28px;
  width:52px;
  height:52px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#03faee,#0017a8);
  color:#fff;
  font-size:26px;
  box-shadow:0 10px 24px rgba(0,23,168,.22);
}

.services .icon-box h4{
  margin:0 0 14px 0;
  font-weight:800;
  font-size:20px;
  line-height:1.4;
}

.services .icon-box h4 a{
  color:#04112b;
  transition:.3s ease;
}

.services .icon-box p{
  margin:0;
  color:#4f5c7f;
  line-height:1.8;
  font-size:15px;
}

.services .icon-box:hover h4 a{
  color:#0017a8;
}

@media(max-width:768px){
  #services{
    padding:80px 0;
  }

  .services .icon-box{
    padding:30px 24px;
    text-align:center;
  }

  .services .icon-box i{
    position:relative;
    top:auto;
    left:auto;
    margin:0 auto 20px;
  }
}

/*--------------------------------------------------------------
# Our Team
--------------------------------------------------------------*/

#team{
  padding:100px 0;
  background:#efefdf;
  position:relative;
  overflow:hidden;
}

#team::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left, rgba(0,23,168,.06), transparent 28%),
    radial-gradient(circle at bottom right, rgba(3,250,238,.08), transparent 28%);
  pointer-events:none;
}

#team .container{
  position:relative;
  z-index:2;
}

#team .section-title h2{
  color:#00174d;
}

#team .section-title p{
  color:#5d6785;
}

.team .row{
  row-gap:30px;
}

.team .member{
  position:relative;
  height:100%;
  padding:30px;
  border-radius:26px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(0,23,168,.08);
  box-shadow:0 12px 35px rgba(0,0,0,.07);
  transition:.35s ease;
  overflow:hidden;
}

.team .member::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:5px;
  height:100%;
  background:linear-gradient(to bottom,#03faee,#0017a8);
}

.team .member:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 45px rgba(0,23,168,.14);
}

.team .member .pic{
  flex:0 0 135px;
  width:135px;
  height:135px;
  overflow:hidden;
  border-radius:24px;
  border:4px solid #fff;
  box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.team .member .pic img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.4s ease;
}

.team .member:hover img{
  transform:scale(1.08);
}

.team .member .member-info{
  padding-left:28px;
}

.team .member h4{
  font-weight:800;
  margin-bottom:8px;
  font-size:22px;
  color:#04112b;
}

.team .member h4 a{
  color:#04112b;
  transition:.3s ease;
}

.team .member h4 a:hover{
  color:#0017a8;
}

.team .member span{
  display:block;
  font-size:15px;
  padding-bottom:14px;
  position:relative;
  font-weight:600;
  color:#5d6785;
}

.team .member span::after{
  content:"";
  position:absolute;
  display:block;
  width:55px;
  height:3px;
  background:linear-gradient(to right,#03faee,#0017a8);
  bottom:0;
  left:0;
  border-radius:20px;
}

.team .member .social{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
}

.team .member .social a{
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(0,23,168,.08);
  color:#0017a8;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.3s ease;
}

.team .member .social a i{
  color:inherit;
  font-size:17px;
  margin:0;
}

.team .member .social a:hover{
  background:linear-gradient(135deg,#03faee,#0017a8);
  color:#fff;
  transform:translateY(-4px);
}

.team .member .social a + a{
  margin-left:0;
}

@media(max-width:768px){
  #team{
    padding:80px 0;
  }

  .team .member{
    flex-direction:column;
    text-align:center;
    align-items:center!important;
    padding:28px 22px;
  }

  .team .member .pic{
    margin-bottom:22px;
  }

  .team .member .member-info{
    padding-left:0;
  }

  .team .member span::after{
    left:50%;
    transform:translateX(-50%);
  }

  .team .member .social{
    justify-content:center;
  }
}
/*================================================
CEO PROFILE PAGE
================================================*/

#ceo-profile{
    position:relative;
    overflow:hidden;
    padding:120px 0 90px;
    background:
    radial-gradient(circle at top left, rgba(0,140,255,.18), transparent 30%),
    radial-gradient(circle at bottom right, rgba(0,255,255,.08), transparent 30%),
    linear-gradient(135deg,#020617,#071b52,#0f172a);
}

#ceo-profile::before,
#ceo-profile::after{
    content:'';
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
    z-index:0;
}

#ceo-profile::before{
    width:300px;
    height:300px;
    background:rgba(0,132,255,.18);
    top:-100px;
    left:-100px;
}

#ceo-profile::after{
    width:250px;
    height:250px;
    background:rgba(0,255,255,.08);
    right:-80px;
    bottom:-80px;
}

#ceo-profile .container{
    position:relative;
    z-index:2;
}

/* IMAGE */

.ceo-image-card{
    position:relative;
    padding:18px;
    border-radius:30px;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.08);
    overflow:hidden;
}

.ceo-img{
    border-radius:24px;
    width:100%;
    display:block;
}

.image-glow{
    position:absolute;
    width:200px;
    height:200px;
    background:#00c3ff;
    border-radius:50%;
    filter:blur(120px);
    top:-40px;
    right:-40px;
    opacity:.25;
}

/* CONTENT */

.ceo-tag{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(3,250,238,.12);
    border:1px solid rgba(3,250,238,.25);
    color:#03faee;
    font-size:13px;
    font-weight:600;
    margin-bottom:22px;
}

.ceo-name{
    color:#fff;
    font-size:64px;
    font-weight:800;
    line-height:1.1;
    margin-bottom:25px;
}

.ceo-lead{
    color:#d7def5;
    font-size:19px;
    line-height:1.9;
    margin-bottom:35px;
}

/* TECH STACK */

.tech-stack{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:35px;
}

.tech-stack span{
    padding:12px 18px;
    border-radius:50px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
    font-size:14px;
    transition:.3s ease;
}

.tech-stack span:hover{
    transform:translateY(-4px);
    background:linear-gradient(135deg,#03faee,#0084ff);
    color:#04112b;
}

/* BIO CARD */

.bio-card{
    padding:30px;
    border-radius:24px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
}

.bio-card p{
    color:#d7def5;
    line-height:2;
    margin:0;
}

/*================================================
CEO SECTION TITLES - FIXED
================================================*/

.ceo-experience,
.products-built{
    padding:100px 0;
    background:#f4f7ff;
}

.ceo-experience .section-title,
.products-built .section-title{
    margin-bottom:55px;
}

.ceo-experience .section-title h2,
.products-built .section-title h2{
    font-size:14px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#0017a8;
    margin-bottom:12px;
    line-height:1.2;
}

.ceo-experience .section-title p,
.products-built .section-title p{
    font-size:38px;
    font-weight:800;
    line-height:1.25;
    color:#04112b;
    margin:0;
}

/* PROFILE CARDS */

.profile-card{
    background:#fff;
    padding:45px 35px;
    border-radius:28px;
    text-align:center;
    transition:.4s ease;
    height:100%;
    box-shadow:0 10px 40px rgba(0,0,0,.06);
}

.profile-card:hover{
    transform:translateY(-10px);
}

.profile-card .icon-box{
    width:80px;
    height:80px;
    margin:auto auto 25px;
    border-radius:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#03faee,#0077ff);
    color:#fff;
    font-size:32px;
}

.profile-card h3{
    font-size:24px;
    margin-bottom:18px;
    color:#04112b;
}

.profile-card p{
    color:#5d6b82;
    line-height:1.9;
}

/* PRODUCT CARDS */

.product-card{
    position:relative;
    overflow:hidden;
    padding:40px 35px;
    border-radius:28px;
    background:linear-gradient(145deg,#071b52,#020617);
    color:#fff;
    transition:.4s ease;
    height:100%;
}

.product-card:hover{
    transform:translateY(-10px);
}

.product-card::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(3,250,238,.08),transparent);
    opacity:0;
    transition:.4s ease;
}

.product-card:hover::before{
    opacity:1;
}

.product-icon{
    width:70px;
    height:70px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.08);
    font-size:28px;
    margin-bottom:25px;
}

.product-card h3{
    margin-bottom:15px;
    font-size:26px;
}

.product-card p{
    color:#d7def5;
    line-height:1.9;
}

/* QUOTE */

.ceo-quote{
    padding:120px 0;
    background:linear-gradient(135deg,#020617,#071b52);
}

.quote-box{
    max-width:900px;
    margin:auto;
    text-align:center;
    padding:70px 50px;
    border-radius:35px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
}

.quote-icon{
    font-size:60px;
    color:#03faee;
    margin-bottom:25px;
    display:block;
}

.quote-box h2{
    color:#fff;
    line-height:1.7;
    font-size:34px;
    font-weight:700;
}

/* RESPONSIVE */

@media(max-width:991px){

    .ceo-name{
        font-size:48px;
    }

    .ceo-content{
        text-align:center;
    }

    .tech-stack{
        justify-content:center;
    }
}

@media(max-width:768px){

    #ceo-profile{
        padding:90px 0 70px;
    }

    .ceo-name{
        font-size:38px;
    }

    .ceo-lead{
        font-size:16px;
    }

    .ceo-experience,
    .products-built{
        padding:80px 0;
    }

    .ceo-experience .section-title,
    .products-built .section-title{
        margin-bottom:38px;
        padding:0 15px;
    }

    .ceo-experience .section-title h2,
    .products-built .section-title h2{
        font-size:12px;
        letter-spacing:2px;
        margin-bottom:10px;
    }

    .ceo-experience .section-title h2::before,
    .ceo-experience .section-title h2::after,
    .products-built .section-title h2::before,
    .products-built .section-title h2::after{
        display:none !important;
        content:none !important;
    }

    .ceo-experience .section-title p,
    .products-built .section-title p{
        font-size:28px;
        line-height:1.35;
    }

    .profile-card{
        padding:38px 25px;
    }

    .quote-box{
        padding:50px 25px;
    }

    .quote-box h2{
        font-size:24px;
    }
}


/*--------------------------------------------------------------
# Portfolio / Products
--------------------------------------------------------------*/

#portfolio{
  position:relative;
  padding:100px 0;
  background:#efefdf;
  overflow:hidden;
}

#portfolio::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left, rgba(0,23,168,.06), transparent 28%),
    radial-gradient(circle at bottom right, rgba(3,250,238,.08), transparent 28%);
  pointer-events:none;
}

#portfolio .container{
  position:relative;
  z-index:2;
}

#portfolio .section-title h2{
  color:#00174d;
}

#portfolio .section-title p{
  color:#5d6785;
}

/* filters */
.portfolio #portfolio-flters{
  padding:0;
  margin:0 auto 35px auto;
  list-style:none;
  text-align:center;
}

.portfolio #portfolio-flters li{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  font-size:14px;
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
  color:#04112b;
  margin:0 6px 10px;
  transition:.3s ease;
  border-radius:50px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(0,23,168,.08);
  box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active{
  color:#04112b;
  background:linear-gradient(135deg,#03faee,#73dfff);
  box-shadow:0 12px 28px rgba(0,183,255,.22);
}

/* product item spacing */
.portfolio .portfolio-item{
  margin-bottom:30px;
}

/* product card */
.portfolio .portfolio-wrap{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  background:#fff;
  box-shadow:0 14px 35px rgba(0,0,0,.08);
  transition:.35s ease;
  height:100%;
}

.portfolio .portfolio-wrap:hover{
  transform:translateY(-8px);
  box-shadow:0 22px 45px rgba(0,23,168,.16);
}

/* image */
.portfolio .portfolio-wrap img{
  width:100%;
  height:280px;
  object-fit:cover;
  transition:.45s ease;
}

.portfolio .portfolio-wrap:hover img{
  transform:scale(1.08);
}

/* overlay */
.portfolio .portfolio-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to top,
      rgba(2,6,23,.92),
      rgba(2,6,23,.55),
      rgba(3,250,238,.08)
    );
  opacity:0;
  transition:.35s ease;
  z-index:2;
}

.portfolio .portfolio-wrap:hover::before{
  opacity:1;
}

/* info */
.portfolio .portfolio-wrap .portfolio-info{
  opacity:0;
  position:absolute;
  inset:0;
  z-index:3;
  transition:.35s ease;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  padding:28px;
}

.portfolio .portfolio-wrap:hover .portfolio-info{
  opacity:1;
}

.portfolio .portfolio-wrap .portfolio-info h4{
  font-size:22px;
  color:#fff;
  font-weight:800;
  margin-bottom:10px;
}

.portfolio .portfolio-wrap .portfolio-info p{
  color:rgba(255,255,255,.82);
  font-size:14px;
  line-height:1.7;
  padding:0;
  margin:0 0 16px;
  font-style:normal;
  text-transform:none;
}

/* lightbox button */
.portfolio .portfolio-wrap .portfolio-links{
  text-align:left;
  z-index:4;
}

.portfolio .portfolio-wrap .portfolio-links a{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#03faee;
  color:#04112b;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  transition:.3s ease;
  margin:0;
}

.portfolio .portfolio-wrap .portfolio-links a:hover{
  background:#fff;
  color:#0017a8;
  transform:scale(1.08);
}

/* portfolio details remain clean */
.portfolio-details{
  padding-top:40px;
}

.portfolio-details .portfolio-details-slider img{
  width:100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination{
  margin-top:20px;
  position:relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet{
  width:12px;
  height:12px;
  background-color:#fff;
  opacity:1;
  border:1px solid #0017a8;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active{
  background-color:#0017a8;
}

.portfolio-details .portfolio-info{
  padding:30px;
  box-shadow:0 12px 35px rgba(0,0,0,.06);
  border-radius:18px;
}

.portfolio-details .portfolio-info h3{
  font-size:22px;
  font-weight:700;
  margin-bottom:20px;
  padding-bottom:20px;
  border-bottom:1px solid #eee;
}

.portfolio-details .portfolio-info ul{
  list-style:none;
  padding:0;
  font-size:15px;
}

.portfolio-details .portfolio-info ul li + li{
  margin-top:10px;
}

.portfolio-details .portfolio-description{
  padding-top:30px;
}

.portfolio-details .portfolio-description h2{
  font-size:26px;
  font-weight:700;
  margin-bottom:20px;
}

.portfolio-details .portfolio-description p{
  padding:0;
}

@media(max-width:768px){
  #portfolio{
    padding:80px 0;
  }

  .portfolio #portfolio-flters li{
    padding:10px 16px;
    font-size:13px;
  }

  .portfolio .portfolio-wrap img{
    height:240px;
  }
}

/*--------------------------------------------------------------
# Pricing – Dark Glass Fixed
--------------------------------------------------------------*/

#pricing{
  position:relative;
  padding:110px 0;
  overflow:hidden;

  background:
  radial-gradient(circle at top left,
  rgba(0,72,255,.18),
  transparent 30%),

  radial-gradient(circle at bottom right,
  rgba(3,250,238,.08),
  transparent 35%),

  linear-gradient(
  135deg,
  #020617 0%,
  #071b52 55%,
  #031a80 100%);
}

#pricing .container{
  position:relative;
  z-index:2;
}

/* TITLE */

#pricing .section-title h2{
  color:#03faee;
}

#pricing .section-title p{
  color:#fff;
}

/* CARD */

.pricing .box{

  position:relative;

  height:100%;

  padding:0 0 35px;

  border-radius:28px;

  overflow:hidden;

  background:
  rgba(9,18,52,.78);

  border:
  1px solid rgba(255,255,255,.10);

  backdrop-filter:blur(14px);

  box-shadow:
  0 20px 40px rgba(0,0,0,.30);

  transition:.35s ease;
}

.pricing .box:hover{
  transform:translateY(-10px);
}

/* HEADER */

.pricing h3{

  margin:0 0 24px;

  padding:22px 15px;

  font-size:18px;

  font-weight:800;

  text-transform:uppercase;

  color:#fff;

  background:
  rgba(255,255,255,.06);
}

/* PRICE */

.pricing h4{

  font-size:54px;

  color:#03faee;

  font-weight:800;

  margin-bottom:26px;
}

.pricing h4 sup{
  font-size:20px;
  color:#fff;
}

.pricing h4 span{
  color:rgba(255,255,255,.70);
  font-size:15px;
}

/* FEATURES */

.pricing ul{
  padding:0 30px;
  list-style:none;
  margin:0;
}

.pricing ul li{

  color:#ffffff;

  padding:14px 0;

  font-size:15px;

  border-bottom:
  1px solid rgba(255,255,255,.06);
}

.pricing ul li:last-child{
  border-bottom:none;
}

/* FEATURED */

.pricing .featured{

  transform:translateY(-12px);

  border:
  1px solid rgba(3,250,238,.35);

  box-shadow:
  0 25px 50px rgba(0,0,0,.38);
}

.pricing .featured h3{

  color:#04112b;

  background:
  linear-gradient(
  135deg,
  #03faee,
  #00b7ff);
}

/* RIBBON */

.pricing .advanced{

  width:190px;

  position:absolute;

  top:22px;
  right:-60px;

  transform:rotate(45deg);

  background:
  linear-gradient(
  135deg,
  #03faee,
  #0084ff);

  color:#04112b;

  font-size:13px;

  font-weight:800;

  padding:6px 0;

  z-index:4;
}

/* MOBILE */

@media(max-width:991px){

  .pricing .featured{
    transform:none;
  }

  .pricing .box{
    margin-bottom:30px;
  }
}

@media(max-width:768px){

  #pricing{
    padding:85px 0;
  }

  .pricing h4{
    font-size:42px;
  }
}

/*--------------------------------------------------------------
# FAQ — Dark Glass Style
--------------------------------------------------------------*/

#faq{
  position:relative;
  padding:110px 0;
  overflow:hidden;

  background:
    radial-gradient(circle at top left, rgba(0,72,255,.22), transparent 30%),
    radial-gradient(circle at bottom right, rgba(3,250,238,.12), transparent 35%),
    linear-gradient(135deg,#020617 0%,#071b52 55%,#031a80 100%);
}

#faq::before,
#faq::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  z-index:0;
}

#faq::before{
  width:320px;
  height:320px;
  background:rgba(0,140,255,.22);
  top:-120px;
  left:-120px;
}

#faq::after{
  width:260px;
  height:260px;
  background:rgba(3,250,238,.12);
  right:-90px;
  bottom:-90px;
}

#faq .container{
  position:relative;
  z-index:2;
}

#faq .section-title h2{
  color:#03faee;
}

#faq .section-title p{
  color:#fff;
}

/* FAQ CARD */
.faq .faq-item{
  margin:0 0 26px;
  padding:30px;
  border:none;
  border-radius:26px;

  background:rgba(9,18,52,.78);
  border:1px solid rgba(255,255,255,.10);

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  box-shadow:0 18px 45px rgba(0,0,0,.30);
  transition:.35s ease;
}

.faq .faq-item:hover{
  transform:translateY(-6px);
  border-color:rgba(3,250,238,.35);
  box-shadow:0 26px 55px rgba(0,0,0,.38);
}

/* ICON */
.faq .faq-item i{
  width:46px;
  height:46px;
  border-radius:15px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  color:#04112b;
  background:linear-gradient(135deg,#03faee,#00b7ff);

  font-size:22px;
  float:left;
  line-height:1;
  padding:0;
  margin:0 16px 0 0;
}

/* QUESTION */
.faq .faq-item h4{
  font-size:18px;
  line-height:1.5;
  font-weight:800;
  margin:0;
  color:#fff;
  font-family:"Poppins",sans-serif;
}

/* ANSWER */
.faq .faq-item p{
  font-size:15px;
  line-height:1.8;
  color:rgba(255,255,255,.82);
  margin:0;
}

.faq .faq-item .col-lg-7{
  display:flex;
  align-items:center;
}

/* MOBILE */
@media(max-width:991px){
  #faq{
    padding:90px 0;
  }

  .faq .faq-item{
    padding:24px;
  }

  .faq .faq-item .col-lg-7{
    display:block;
    margin-top:18px;
  }
}

@media(max-width:576px){
  .faq .faq-item{
    text-align:left;
  }

  .faq .faq-item i{
    float:none;
    margin:0 0 15px 0;
  }
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/

#contact{
  position:relative;
  padding:110px 0;
  overflow:hidden;

  background:
    radial-gradient(circle at top left, rgba(0,72,255,.22), transparent 30%),
    radial-gradient(circle at bottom right, rgba(3,250,238,.12), transparent 35%),
    linear-gradient(135deg,#020617 0%,#071b52 55%,#031a80 100%);
}

#contact::before,
#contact::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  z-index:0;
}

#contact::before{
  width:320px;
  height:320px;
  background:rgba(0,140,255,.22);
  top:-120px;
  left:-120px;
}

#contact::after{
  width:260px;
  height:260px;
  background:rgba(3,250,238,.12);
  right:-90px;
  bottom:-90px;
}

#contact .container{
  position:relative;
  z-index:2;
}

#contact .section-title h2{
  color:#03faee;
}

#contact .section-title p{
  color:#fff;
}

/* Map */
#contact iframe{
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.10) !important;
}

/* Contact info card */
.contact .info{
  width:100%;
  height:100%;
  padding:35px 28px;
  border-radius:28px;

  background:rgba(9,18,52,.78) !important;
  border:1px solid rgba(255,255,255,.10);

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  box-shadow:0 18px 45px rgba(0,0,0,.30);
}

.contact .info .address,
.contact .info .email,
.contact .info .phone{
  position:relative;
  padding:20px 0;
}

.contact .info .email,
.contact .info .phone{
  margin-top:18px;
}

.contact .info i{
  font-size:22px;
  color:#04112b;
  float:left;
  width:48px;
  height:48px;
  background:linear-gradient(135deg,#03faee,#00b7ff);
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:16px;
  transition:.3s ease;
  box-shadow:0 10px 24px rgba(3,250,238,.18);
}

.contact .info .email:hover i,
.contact .info .address:hover i,
.contact .info .phone:hover i{
  transform:translateY(-4px);
  background:#fff;
  color:#0017a8;
}

.contact .info h4{
  padding:0 0 0 65px;
  font-size:20px;
  font-weight:800;
  margin-bottom:6px;
  color:#fff;
}

.contact .info p{
  padding:0 0 0 65px;
  margin-bottom:0;
  font-size:15px;
  line-height:1.8;
  color:rgba(255,255,255,.78);
}

/* Form card */
.contact .php-email-form{
  width:100%;
  padding:35px;
  border-radius:28px;

  background:rgba(9,18,52,.78) !important;
  border:1px solid rgba(255,255,255,.10);

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  box-shadow:0 18px 45px rgba(0,0,0,.30);
}

.contact .php-email-form .form-group{
  padding-bottom:8px;
}

/* Inputs */
.contact .php-email-form input,
.contact .php-email-form textarea{
  width:100%;
  border-radius:16px !important;
  box-shadow:none !important;
  font-size:14px;

  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.07) !important;
  color:#fff !important;

  padding:14px 18px;

  transition:.3s ease;
}

.contact .php-email-form input{
  height:54px;
}

.contact .php-email-form textarea{
  min-height:150px;
  resize:vertical;
}

.contact .php-email-form input::placeholder,
.contact .php-email-form textarea::placeholder{
  color:rgba(255,255,255,.58);
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus{
  border-color:#03faee !important;
  background:rgba(255,255,255,.10) !important;
  box-shadow:0 0 0 4px rgba(3,250,238,.12) !important;
  outline:none !important;
}

/* Error text */
.contact .php-email-form small.text-danger{
  display:block;
  margin-top:6px;
  color:#ff8a8a !important;
  font-size:13px;
}

/* Recaptcha container */
.contact .php-email-form .g-recaptcha{
  transform-origin:center;
}

/* Submit */
.contact .php-email-form button[type=submit]{
  border:0;
  padding:15px 38px;
  color:#04112b;
  transition:.35s ease;
  border-radius:50px;
  font-weight:800;

  background:linear-gradient(135deg,#03faee,#00b7ff) !important;

  box-shadow:0 12px 28px rgba(3,250,238,.25);
}

.contact .php-email-form button[type=submit]:hover{
  transform:translateY(-3px);
  background:#fff !important;
  color:#0017a8;
}

.contact .php-email-form button[type=submit]:disabled{
  opacity:.65;
  cursor:not-allowed;
}

/* Alerts */
#contact .alert{
  border:0;
  border-radius:18px;
  padding:16px 20px;
}

#contact .alert-success{
  background:#0dcf83;
  color:#fff;
}

#contact .alert-danger{
  background:#ff4d4f;
  color:#fff;
}

/* Mobile */
@media(max-width:991px){
  #contact{
    padding:90px 0;
  }

  .contact .php-email-form,
  .contact .info{
    padding:28px 22px;
  }
}

@media(max-width:576px){
  .contact .info i{
    float:none;
    margin-bottom:14px;
  }

  .contact .info h4,
  .contact .info p{
    padding-left:0;
  }

  .contact .php-email-form button[type=submit]{
    width:100%;
  }

  #contact iframe{
    height:230px !important;
  }
}

.section-title p {
  color: #001233 !important;
}

.section-title h2 {
color: #0017a8 !important;
}

#testimonials .section-title p{
  color: #00fff2!important;
}

#testimonials .section-title h2{
 color: #ffffff!important;
}

::selection{
  background: transparent!important;
}