body{ scroll-behavior: smooth; font-family: 'Roboto';}
html.lenis,
html.lenis body { height: auto;}
.lenis.lenis-smooth { scroll-behavior: auto !important;}
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain;}
.lenis.lenis-stopped {   overflow: hidden;}
.lenis.lenis-scrolling iframe {   pointer-events: none;}
::-webkit-scrollbar {  width: 0px;}
::-webkit-scrollbar-thumb {   background: #ca252b; }
::-webkit-scrollbar-thumb:hover {  background: #ca252b; }
.hc-offcanvas-nav.hc-nav-1.nav-position-left .nav-container {  transform: translate3d(-493px, 0, 0);}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.eot');
    src: url('../fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Medium.woff2') format('woff2'),
        url('../fonts/Roboto-Medium.woff') format('woff'),
        url('../fonts/Roboto-Medium.ttf') format('truetype'),
        url('../fonts/Roboto-Medium.svg#Roboto-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-SemiBold.eot');
    src: url('../fonts/Roboto-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-SemiBold.woff2') format('woff2'),
        url('../fonts/Roboto-SemiBold.woff') format('woff'),
        url('../fonts/Roboto-SemiBold.ttf') format('truetype'),
        url('../fonts/Roboto-SemiBold.svg#Roboto-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.eot');
    src: url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Regular.woff2') format('woff2'),
        url('../fonts/Roboto-Regular.woff') format('woff'),
        url('../fonts/Roboto-Regular.ttf') format('truetype'),
        url('../fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-SemiBold.eot');
    src: url('../fonts/Geist-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-SemiBold.woff2') format('woff2'),
        url('../fonts/Geist-SemiBold.woff') format('woff'),
        url('../fonts/Geist-SemiBold.ttf') format('truetype'),
        url('../fonts/Geist-SemiBold.svg#Geist-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-Regular.eot');
    src: url('../fonts/Geist-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-Regular.woff2') format('woff2'),
        url('../fonts/Geist-Regular.woff') format('woff'),
        url('../fonts/Geist-Regular.ttf') format('truetype'),
        url('../fonts/Geist-Regular.svg#Geist-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-Bold.eot');
    src: url('../fonts/Geist-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-Bold.woff2') format('woff2'),
        url('../fonts/Geist-Bold.woff') format('woff'),
        url('../fonts/Geist-Bold.ttf') format('truetype'),
        url('../fonts/Geist-Bold.svg#Geist-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-Medium.eot');
    src: url('../fonts/Geist-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-Medium.woff2') format('woff2'),
        url('../fonts/Geist-Medium.woff') format('woff'),
        url('../fonts/Geist-Medium.ttf') format('truetype'),
        url('../fonts/Geist-Medium.svg#Geist-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-Light.eot');
    src: url('../fonts/Geist-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Geist-Light.woff2') format('woff2'),
        url('../fonts/Geist-Light.woff') format('woff'),
        url('../fonts/Geist-Light.ttf') format('truetype'),
        url('../fonts/Geist-Light.svg#Geist-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.eot');
    src: url('../fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Montserrat-Regular.woff2') format('woff2'),
        url('../fonts/Montserrat-Regular.woff') format('woff'),
        url('../fonts/Montserrat-Regular.ttf') format('truetype'),
        url('../fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Light.eot');
    src: url('../fonts/Montserrat-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Montserrat-Light.woff2') format('woff2'),
        url('../fonts/Montserrat-Light.woff') format('woff'),
        url('../fonts/Montserrat-Light.ttf') format('truetype'),
        url('../fonts/Montserrat-Light.svg#Montserrat-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-SemiBold.eot');
    src: url('../fonts/Montserrat-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Montserrat-SemiBold.woff2') format('woff2'),
        url('../fonts/Montserrat-SemiBold.woff') format('woff'),
        url('../fonts/Montserrat-SemiBold.ttf') format('truetype'),
        url('../fonts/Montserrat-SemiBold.svg#Montserrat-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: "MontserratSemiBold";
  src: url("../fonts/MontserratSemiBold.eot");
  src: url("../fonts/MontserratSemiBold.eot") format("embedded-opentype"),
    url("../fonts/MontserratSemiBold.woff2") format("woff2"),
    url("../fonts/MontserratSemiBold.woff") format("woff"),
    url("../fonts/MontserratSemiBold.ttf") format("truetype"),
    url("../fonts/MontserratSemiBold.svg#MontserratSemiBold") format("svg");
}
@font-face {
  font-family: "MontserratRegular";
  src: url("../fonts/MontserratRegular.eot");
  src: url("../fonts/MontserratRegular.eot") format("embedded-opentype"),
    url("../fonts/MontserratRegular.woff2") format("woff2"),
    url("../fonts/MontserratRegular.woff") format("woff"),
    url("../fonts/MontserratRegular.ttf") format("truetype"),
    url("../fonts/MontserratRegular.svg#MontserratRegular") format("svg");
}
@font-face {
  font-family: "MontserratMedium";
  src: url("../fonts/MontserratMedium.eot");
  src: url("../fonts/MontserratMedium.eot") format("embedded-opentype"),
    url("../fonts/MontserratMedium.woff2") format("woff2"),
    url("../fonts/MontserratMedium.woff") format("woff"),
    url("../fonts/MontserratMedium.ttf") format("truetype"),
    url("../fonts/MontserratMedium.svg#MontserratMedium") format("svg");
}
@font-face {
  font-family: "MontserratLight";
  src: url("../fonts/MontserratLight.eot");
  src: url("../fonts/MontserratLight.eot") format("embedded-opentype"),
    url("../fonts/MontserratLight.woff2") format("woff2"),
    url("../fonts/MontserratLight.woff") format("woff"),
    url("../fonts/MontserratLight.ttf") format("truetype"),
    url("../fonts/MontserratLight.svg#MontserratLight") format("svg");
}
@font-face {
  font-family: "MontserratBold";
  src: url("../fonts/MontserratBold.eot");
  src: url("../fonts/MontserratBold.eot") format("embedded-opentype"),
    url("../fonts/MontserratBold.woff2") format("woff2"),
    url("../fonts/MontserratBold.woff") format("woff"),
    url("../fonts/MontserratBold.ttf") format("truetype"),
    url("../fonts/MontserratBold.svg#MontserratBold") format("svg");
}
@font-face {
  font-family: "MontserratExtraBold";
  src: url("../fonts/MontserratExtraBold.eot");
  src: url("../fonts/MontserratExtraBold.eot") format("embedded-opentype"),
    url("../fonts/MontserratExtraBold.woff2") format("woff2"),
    url("../fonts/MontserratExtraBold.woff") format("woff"),
    url("../fonts/MontserratExtraBold.ttf") format("truetype"),
    url("../fonts/MontserratExtraBold.svg#MontserratExtraBold") format("svg");
}


li{list-style: none;}
ul{padding: 0; margin: 0;}
a{text-decoration: none; transition: 0.5s;}
a:hover{transition: 0.5s;}
.main-container {  margin: 0 50px;}
.sub-container { margin: 0 100px;}
.cybers-container {  margin: 0 150px;}
.cyber-container {
  margin: 0 100px;
}
/* header */
.navbar-brand{width: 180px;}
.online-btn{ position: absolute;right: 0;}
.navbar-light .navbar-nav .nav-link{color: #000; font-size: 15px; font-weight: 600; padding: 10px 21px; transition: 0.5s; font-family: 'Montserrat';}
.navbar-light .navbar-nav .nav-link:hover{transform: translateY(-2px); transition: 0.5s;}
.navbar-expand-lg .navbar-collapse{justify-content: end;}
.desk-topmenu{position: relative;}

.mail-top.leftalgn {text-align: left;  padding-left: 60px;}
.mail-top.call-text {text-align: right;   padding-right: 60px;}
header {padding: 0px 0px;position: absolute; top: 20px; width: 100%;z-index: 9;}
.banner {  position: relative;background: transparent linear-gradient(344deg, #0D193D 0%, #5068AC 58%, #6E81B4 71%, #D7DDED 100%) 0% 0% no-repeat padding-box;
border-radius: 0px 0px 52px 52px;}
.row.toppr {margin: 0;}
.online-btn a:hover{ transform: translateY(-5px) !important;}
header .toggle{width: auto;height: auto; top: 45px;right: 0;}
.navbar-expand-lg{padding-right: 55px;}
.desk-topmenu .nav-item { position: relative;}
.desk-topmenu .dropdown-menu {display: block !important;position: absolute;top: 120%;left: 0;background: #ca252b;min-width: 180px;padding: 10px 0;border-radius: 6px;box-shadow: 3px 3px 6px #0000004A;opacity: 0;visibility: hidden;transform: translateY(15px);transition: 0.3s;}
.desk-topmenu .nav-item:hover .dropdown-menu {opacity: 1;visibility: visible;transform: translateY(0);}
.desk-topmenu .submenu {position: relative;}
.desk-topmenu .dropdown-submenu {position: absolute;top: 0;left: 100%;background: #ca252b;min-width: 180px;padding: 10px 0;border-radius: 6px;box-shadow: 3px 3px 6px #0000004A;opacity: 0;visibility: hidden;transform: translateY(15px) scale(0.95);transition: all 0.35s ease;}
.desk-topmenu .submenu:hover .dropdown-submenu {opacity: 1;visibility: visible;transform: translateX(0);}
.desk-topmenu .dropdown-menu li, .desk-topmenu .dropdown-submenu li {list-style: none;}
.desk-topmenu .dropdown-menu a, .desk-topmenu .dropdown-submenu a {display: block;padding: 10px 15px;color: #fff;text-decoration: none;transition: 0.3s;}
.desk-topmenu .dropdown-menu a:hover, .desk-topmenu .dropdown-submenu a:hover {background: #002452;padding-left: 20px;}
.desk-topmenu .nav-link i {margin-left: 0px;font-size: 12px;transition: 0.3s;}
.desk-topmenu .nav-item:hover .nav-link i {transform: rotate(180deg);}
/* .smaller{ position: fixed;width: 100%;top: 0;left: 0;background: #fff;z-index: 99; box-shadow: 0px 3px 6px #00000029;} */
/* banner */
.banner-img{position: relative; border-radius: 15px; overflow: hidden;}
.banner-text{width: 100%;padding-bottom: 80px; }
.banner-text h1{font-size: 40px;font-weight: 400;   font-family: "MontserratMedium";margin: 0;  color: #B6BED3;text-align: center;margin-bottom: 30px;}
.phone-banner{display: none; border-radius: 10px; overflow: hidden;}
.cyberonebtn a {background: #FEFEFE 0% 0% no-repeat padding-box;
border-radius: 8px; padding: 8px 15px;color: #1A1927;}
.cyberonebtn a:hover {background: #002452;color: #fff;transition: 0.5s;}
.cybertwobtn a {background: #201F30 0% 0% no-repeat padding-box;
border-radius: 8px; padding: 8px 15px;color: #fff;}
.cybertwobtn a:hover {background: #fff;color: #201F30; transition: 0.5s;}
.cyberbtns{display: flex;gap: 20px;justify-content: center;}
.cyberbg{background: #1A1927;}
/* cyber */
.cyberwrapper {background: #1A1927;padding: 60px 0;}
.cyberleft{padding-right: 50px;}
.cyberright h6 {color: #5574C4;  font-family: 'Roboto'; font-size: 15px; font-weight: 300;}
.cyberright h2 {color: #B6BED3;  font-family: 'Montserrat';font-size: 26px;font-weight: 400;padding-right: 10%;}
.cyberfflex {display: flex;align-items: center;}
/* core */
.corewrapper{background: #1A1927;padding: 60px 0;}
.corecenter h2 {color: #fff;
  font-family: 'Montserrat';
  font-size: 34px;
  font-weight: 500;
  margin: 0;
  padding-bottom: 20px;text-align: center;}
.corecenter p {color: #B6BED3;  font-family: 'Roboto'; font-size: 15px; font-weight: 300;text-align: center;padding: 0 90px;margin-bottom: 50px;}
.cards{
  display:flex;
  justify-content:center;
  gap:40px;
  flex-wrap:wrap;
}
.card{
background: #201F30;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  transition:0.3s;
}
.card-content{ padding:25px; text-align:center;}
.card-content h3{
 font-size: 18px;
  color: #fff;
  font-family: 'Montserrat';
  font-weight: 500;
  margin: 0;
  padding-bottom: 20px;
  text-align: center;
}
.card-content p{font-family: 'Roboto';  font-size: 14px;  font-weight: 300;  color: #B6BED3; text-align: center;  padding: 0 10%;height: 45px;}
.card:hover{ transform:translateY(-10px);  box-shadow:0 15px 40px rgba(0,0,0,0.6);}
/* key */
.keywrapper h2 {color: #fff; font-family: 'Montserrat';font-size: 34px;  font-weight: 500;  margin: 0;  padding-bottom: 40px;}
.keybox{background: #201F2F;border: 0.5px solid #545353;border-radius: 16px;display: flex; gap: 15px;  padding: 20px 20px;margin-bottom: 20px;}
.keyone { background: #292A41 0% 0% no-repeat padding-box;border-radius: 12px;padding: 15px 15px;display: flex;  align-items: center;}
.keyone h6 {color: #FFFFFF;background: #292A41 0% 0% no-repeat padding-box;border-radius: 12px;font-size: 18px;margin: 0;}
.keytext h5{color: #B6BED3; font-family: 'Roboto'; font-size: 18px; font-weight: 300;padding-right: 18%;}
.keybg { background-color: #1a1927; padding: 40px 0;position: relative;overflow: hidden;}
.keymargin  {
  position: relative;
  z-index: 99;
}

.keys{animation: birdFly 25s ease-in-out infinite;
  transform-origin: center;
  position: absolute;
  top: 0;
  right: 0;}
 @keyframes birdFly {0% { transform: translate(0,0) rotate(0); }20% { transform: translate(20px,-10px) rotate(4deg); }40% { transform: translate(40px,0px) rotate(-2deg); }60% { transform: translate(20px,10px) rotate(3deg); }80% { transform: translate(10px,5px) rotate(-2deg); }100% { transform: translate(0,0) rotate(0); }}

/* Join */
.communitywrapper { background: linear-gradient(135deg, #1a2a4f, #5b6fa3); padding: 80px 0; color: #fff;  transition: opacity 1s ease;background: transparent linear-gradient(179deg, #0A122C 0%, #4A62A5 40%, #6476A9 60%, #606E93 74%, #000000 100%) 0% 0% no-repeat padding-box;}
.joinleft h2 { font-size: 34px; font-family: 'Montserrat';}
.joinright p { margin-bottom: 20px;color: #B6BED3; font-family: 'Roboto'; font-size: 15px; font-weight: 300;padding-right: 15%;}
/* BUTTONS */
.communitywrapper .buttons {display: flex; gap: 15px;}
.communitywrapper .btn-custom {  padding: 12px 22px; border-radius: 6px;  border: none;  cursor: pointer;  position: relative; overflow: hidden; transition: 0.4s;}
.communitywrapper .btn-custom.light { background: #fff; color: #000;}
.communitywrapper .btn-custom.dark { background: #111;  color: #fff;}
/* Hover effect */
.communitywrapper .btn-custom::before { content: ""; position: absolute;  width: 0%;  height: 100%; top: 0; left: 0; background: rgba(255,255,255,0.2); transition: 0.4s;}
.communitywrapper .btn-custom:hover::before { width: 100%;}
.communitywrapper .btn-custom:hover { transform: translateY(-4px) scale(1.05);}
/* SUBSCRIBE */
.subscribe-box { display: flex;border: 0.5px solid #FEFEFE; border-radius: 6px;  overflow: hidden;width: 100%;}
.subscribe-box input { flex: 1; padding: 14px; border: none; outline: none; background: transparent; color: #fff;}
.subscribe-box input::placeholder{color: #fff;}
.subscribe-box input:focus {background: rgba(255,255,255,0.05);}
.subscribe-btn {  padding: 14px 20px;  border: none;  background: #fff;  transition: 0.3s;}
.subscribe-btn:hover { background: #ddd; transform: scale(1.05);}
.sentwrap{display: flex;gap: 10px;}
.joinbox{margin-top: 90px;padding-top: 40px;}
.jointext h3 {color: #fff;  font-family: 'Montserrat';font-size: 32px;font-weight: 300;margin: 0;}
/* footer */
.cyber-footer {  position: relative; padding: 60px 0;  color: #fff; overflow: hidden;}
.cyber-footer::before {content: ""; position: absolute; inset: 0;  background: url("../images/footer-bg.png") center/cover no-repeat; filter: blur(8px);  z-index: -2;}
.cyber-footer::after {  content: ""; position: absolute; inset: 0;background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 50, 100, 0)); z-index: -1;}
.footer-logo { width: 180px; opacity: 0.95;margin-bottom: 30px;}
.contact { display: flex; justify-content: center; gap: 30px; font-size: 15px;  opacity: 0.85;}
.contact img {height: 15px; padding-right: 5px;}
.contact a {color: #fff;display: flex;  align-items: center; gap: 5px;}
.quicknone {margin: 0;}
.social  { text-align: center;}
.social .icon { display: inline-block;padding: 10px 14px; border-radius: 50%; transition: 0.3s; cursor: pointer;}
.social .icon img{ height: 15px;}
.social .icon:hover { background: #00bfff;  transform: translateY(-6px) scale(1.2); box-shadow: 0 0 15px #00bfff;}
.footer-bottomright {text-align: right;display: flex; gap: 20px; justify-content: end;}
.footer-bottomright a{color: #fff;}
.footer-bottom {  margin-top: 15%;display: flex; align-items: center;}
.footer-bottom p { margin: 0;color: #fff;font-size: 14px;}
.contact span { background: #000000b2;  padding: 10px 30px; border-radius: 10px;color: #fff;transition: 0.5s;}
.contact span:hover {background: #0c0e5b;transition: 0.5s;}
/* team */
.title { font-size: 42px;  margin-bottom: 20px;}
.desc {  opacity: 0.7;  line-height: 1.6;}
.team-card { position: relative; border-radius: 14px; overflow: hidden; transition: 0.4s; cursor: pointer;}
.team-card img {  width: 100%;  display: block;  transition: 0.4s;}
.info {  position: absolute;  bottom: 0;  width: 100%; padding: 10px; text-align: center; backdrop-filter: blur(10px); border-radius: 0 0 14px 14px;}
.info.light { background: rgba(0, 0, 0, 0.68);  border: 0.5px solid #FEFEFE7A;border-radius: 15px;   opacity: 1;  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); color: #fff;min-height: 100px;;display: flex; flex-direction: column;justify-content: center;}
.info.dark {background: rgba(0, 0, 0, 0.68); border: 0.5px solid #FEFEFE7A; border-radius: 15px;  opacity: 1;  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); color: #fff;min-height: 100px;display: flex; flex-direction: column; justify-content: center;}
.info h5, .info h6 {margin: 0;}
.info p { font-size: 12px; opacity: 0.8;margin: 0;}
.team-card:hover { transform: translateY(-8px);}
.team-card:hover img {  transform: scale(1.08);}
.team-card.big img { height: 300px; object-fit: cover;}
.team-card:not(.big) img { height: 310px; object-fit: cover;}
.teamwrapper {background: #1A1927;padding: 50px 50px;}
.teamwrap {background: #201F30;padding: 50px 50px;}
.teamleft h2 {  color: #fff; font-family: 'Montserrat'; font-size: 32px; font-weight: 400; margin: 0; padding-bottom: 20px;}
.teamleft p {  color: #fff; font-family: 'Roboto'; font-size: 15px; font-weight: 300; padding-right: 20%;}
.tcards { display: -ms-grid;  display: grid;  -ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr;  grid-template-columns: repeat(5, 1fr); grid-gap: 15px; padding-bottom: 10px;margin-top: 20px;}
/* about cyber */
.aboutcyberwrapper {background: transparent linear-gradient(360deg, #37405A 0%, #D1D8EB 0%, #6E81B4 44%, var(--unnamed-color-1a1927) 100%) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(360deg, #37405A 0%, #D1D8EB 0%, #6E81B4 44%, #1A1927 100%) 0% 0% no-repeat padding-box;padding: 60px 0;}
.box {border: 0.5px solid #242943; border-radius: 15px; padding: 20px; display: flex; gap: 20px;}
.aboutcybermargin{ background: transparent linear-gradient(91deg, #FAFAFD 0%, #5E7CC7 100%) 0% 0% no-repeat padding-box; border-radius: 30px; padding: 50px 50px;}
.aboutcyberleft p {  font-family: 'Roboto';  font-size: 15px;  font-weight: 400;  color: #000;padding-right: 14%;margin-bottom: 20px;}
.aboutcyberleft h2 {  color: #000; font-family: 'Montserrat'; font-size: 34px; font-weight: 500; margin: 0; padding-bottom: 20px;}
.box h4 {  color: #000;font-family: 'Roboto';  font-size: 20px;  font-weight: 400;  margin: 0;  padding-bottom: 10px;}
.box p { font-family: 'Roboto'; font-size: 14px; font-weight: 400; color: #000;margin-bottom: 0px;}
.aboutcard{background-color: #D2DAEF; border-radius:20px;  padding:40px; position:relative;  }
.tops{ display:flex;gap: 30px; margin-bottom:15px;position: relative;}
.tops img{width: 160px;  height: 190px; border-radius:10px; object-fit:cover;}
.tops h3{ font-size: 18px; margin-bottom: 5px;  color: #1A1927;}
.tops small{font-size: 13px; font-family: 'Roboto'; color: #1A1927; font-weight: 500;}
.btmsmalls{position: absolute;bottom: 0;}
.btmsmalls p {  font-size: 12px; font-weight: 300;margin: 0; font-family: 'Roboto';}
.aboutcyberp p{ font-size:13px;  color:#333;  line-height:1.5;  margin-bottom: 10px;}
.aboutcyberp ul {list-style: none;margin-bottom: 0;}
.aboutcyberp li {font-size:13px;position: relative; color:#333; line-height:1.5;  margin-bottom:10px;padding-left: 20px;}
.aboutcyberp li::before{position: absolute;left: 0;width: 8px;height: 8px;background-color: #201F30;border-radius: 30px;content: '';top: 5px;}
.aboutbtn{ padding:8px 18px; border:1px solid #888;  border-radius:6px;  background:none;  cursor:pointer;color: #1A1927;}
.aboutbtn:hover {background: #1A1927; color: #fff; transition: 0.5s;}
.dots{position: absolute; top: 35px; right: 40px; width: 22px; height: 22px; background: #2b2e3a; border-radius: 50%;}
.aboutcard::after{content:""; position:absolute;bottom: -1px; right:0; width:80px; height:80px;background-image: url(../images/paper1.png); background-size: cover;background-repeat: no-repeat;  border-bottom-right-radius:20px;}
.aboutcard:hover{ transform:translateY(-5px);  transition:0.3s;}
.teamwidth { min-width: 260px; max-width: 310px;margin-bottom: 20px;}
.aboutbtns {margin-top: 20px;}

/* rotating layer */

.keybox {  background: #201F2F;  border: 0.5px solid #545353;  border-radius: 16px;  display: flex;  gap: 15px;  padding: 20px;  margin-bottom: 20px;  transition: all 0.4s ease;}
.keybox:hover { transform: translateY(-8px) scale(1.02); border-color: #7f8cff;  box-shadow: 0 10px 25px rgba(127, 140, 255, 0.3);}
.keybox {  opacity: 0;  transform: translateY(40px);  animation: fadeUp 0.8s ease forwards;}
.keybox:nth-child(1) { animation-delay: 0.1s; }
.keybox:nth-child(2) { animation-delay: 0.2s; }
.keybox:nth-child(3) { animation-delay: 0.3s; }
.keybox:nth-child(4) { animation-delay: 0.4s; }
.keybox:nth-child(5) { animation-delay: 0.5s; }
.keybox:nth-child(6) { animation-delay: 0.6s; }
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.desk-banner {display: block;}
.phone-banner{display: none;}
.teamphone{display: none;}
/* quick popup */
/* Overlay */
/* Popup box */
.popup-box {   background: #fff;padding: 20px;    width: 350px;   border-radius: 10px;   position: relative;   animation: fadeIn 0.3s ease;}
/* Close button */
.close-btn {   position: absolute;   top: 10px;   right: 15px;   font-size: 22px;   cursor: pointer;}
/* Form */
.popup-box h3 {    margin-bottom: 15px;}
.popup-box input,
.popup-box textarea {   width: 100%;   margin-bottom: 10px;   padding: 10px;   border: 1px solid #ccc;   border-radius: 5px;   font-size: 14px;}
.popup-box textarea {   resize: none;   height: 80px;}
.popup-box button {   border: 1px solid #201F30;width: 100%;   padding: 10px;   background:#201F30;   color: #fff;   border: none;   border-radius: 5px;font-size: 14px;   cursor: pointer;}
  .popup-box button:hover {border: 1px solid #201F30; background: #fff; color: #201F30; transition: 0.5s;}
/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.popup-overlay {   position: absolute;  top: 80%;   right: 0;    width: 350px;    background: transparent;    display: none;   z-index: 999;}

.contactdesktop {  position: relative;}
.contactphone{  position: relative;}
/* open animation */
.popup-box {    animation: fadeIn 0.3s ease forwards;}
/* fade out class */
.popup-box.fade-out {   animation: fadeOut 0.3s ease forwards;}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}