/* In home.css or */ /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Sofia+Sans&display=swap'); */ #nav-main, #nav-main .navbar-nav .nav-link, .topmenu li.nav-item > a.nav-link, a { font-family: "Sofia Sans", sans-serif; } section { padding: 50px 0; overflow: hidden; } .sitec { max-width: 80%; } .hero .row.h-100 { min-height: 100vh; } .herocontent h1 span { font-size: 3.25rem; display: block; color: #000; } .navbar-brand, .socitalk li { transition: transform 0.3s; } .awards li : hover,.navbar-brand : hover,.socitalk li : hover { animation: 0.5s jumbAnimation; } @keyframes jumbAnimation { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .herocontent h1 { color: #000; } .hero .btn { font-size: 18px; } .sitebtn { min-width: 100px; font-size: 17px; position: relative; padding: 11px 18px; transition: 0.5s; line-height: normal; } .robothand { transform: scale(80%); } #nav-main .navbar-nav { max-width: 270px; xbackground: #24e5fe; padding: 10px 0; } #nav-main .nav-item { margin: 3px 10px; text-transform: uppercase; font-weight: 600; } #nav-main .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; display: inline-block; outline: 0 !important; width: 100%; color: #fff; } .topmenu .transmenu { position: absolute; background: 0 0 !important; color: #fff; border: 0; padding-left: 300px; top: 14px !important; left: 0 !important; z-index: -1; } .nav-link.burger { position: relative; top: inherit; right: inherit; width: auto; padding: 5px; height: auto; display: block !important; } .burger { display: none !important; position: absolute; top: 30px; right: 40px; height: 20px; width: 20px; padding: 10px; box-sizing: border-box; background: #fff0; border: 4px solid #fff0; border-radius: 3px; z-index: 5; } .abrido .burger, .cust-cls1, .navbar-expand-lg .navbar-collapse.abrido { display: block !important; } .burger span, .nav-item.select > .dropdown-menu { display: block; } .burger span { position: absolute; width: 100%; height: 2px; top: 50%; margin-top: -1px; left: 0; background: #ddd; transition: 0.4s; } .nav-link.burger : hover { background: #fff0; border-color: #fff0; } .burger : hover { background: #24e5fe; border-color: #24e5fe; cursor: pointer; } .burger : hover span { background-color: #222d2e !important; } .burger span : first-child { top: 3px; } .burger span : last-child { top: 17px; } .stickycont { position: sticky; top: 60px; } .stickycont .wgradbg { position: sticky; top: 40px; } .burger.abrido span { opacity: 0; top: 50%; transform: rotate(45deg); background-color: #fff; } .burger.abrido span : first-child { opacity: 1; transform: rotate(45deg); } .burger.abrido span : last-child { opacity: 1; transform: rotate(-45deg); } #nav-main { background: #fff0; position: fixed; top: 0; left: 0; width: 100%; height: 100px; z-index: 3; transition: 0.4s 0.5s; overflow: hidden; padding: 70px 10px 10px; visibility: hidden; } #nav-main.abrido { height: 100%; background: #021222fa; transition-delay: 0.1s; visibility: visible; } #nav-main ul { opacity: 0; transition-delay: 0.1s; } #nav-main .dropdown-menu .catmenu ul { padding-left: 0; } #nav-main .dropdown-menu .catmenu ul li { margin-bottom: 5px; margin-top: 3px; list-style: none; } #nav-main .dropdown-menu a { color: #3d698a; background: #fff0; text-decoration: none; list-style: none; text-transform: capitalize; } #nav-main .dropdown-menu a : hover { color: #fff; } .navbar-brand { position: relative; z-index: 999; } .headingmenu, a.headingmenu { color: #fff !important; text-transform: uppercase !important; } .catmenu { margin-left: 7px; } #nav-main .nav-item.select > a { background: #2fd5ea; border-radius: 4px; color: #fff !important; } #nav-main.abrido ul { opacity: 1; transition-delay: 0.1s; width: 100%; } .mainmenu.navbar-expand-lg #nav-main .navbar-nav { flex-direction: column; } #nav-main .dropdown { position: inherit; } .nicon { background-image: url(../images/nexcenz-icon.svg); width: 70%; height: 100%; } .mainmenu { position: fixed; width: 100%; background: 0 0 !important; z-index: 999; top: 0; } .topmenu { xposition: relative; z-index: 999; } .topmenu li.nav-item > a.nav-link { color: var(--mcolor) !important; text-transform: uppercase; position: relative; outline: 0 !important; z-index: inherit; } .topmenu li.nav-item>a.nav-link : :after { bottom: 0; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); } .topmenu li.nav-item>a.nav-link : :before { top: 0; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); display: none; } .innermenu .mainmenu { /* background: #0a1e53 !important; */ } .sitebtn { background-color: #1cbbff; border-color: #1cbbff; color: #fff !important; } a.nav-link.whitebtn { border: 1px solid #fff; padding: 8px 20px !important; color: #fff !important; border-radius: 4px; position: relative; overflow: hidden; } .nav-link.whitebtn : after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #20b2fa; transform: translateX(-110%); z-index: -9; transition: transform 1s; } .nav-link.whitebtn : hover : after { padding: 0; margin: 0; opacity: 1; transform: translateX(0); } .siteoutlinebtn { border: 1px solid #0bbafd; color: #061329; font-weight: 700; min-width: 120px; } .siteoutlinebtn : hover { background: #0bbafd; color: #fff; } .bigf h2 span, .bigf h3 span { font-size: 30px; color: #1eacff; display: block; } .navbar { background-color: #111; transition: 0.5s ease-in-out; } .topmenu .dropdown-menu { background: #071d35; color: #fff !important; } .topmenu li { margin: 0 10px; z-index: 999; position: initial; } .topmenu .dropdown-item { color: #fff; } .topmenu .dropdown-item : hover { background-color: #fff0; } .topmenu .dropdown : hover .dropdown-menu li a { color: #a0c9db; text-decoration: none; } .topmenu .dropdown : hover .dropdown-menu li a : hover { color: #fff; } .topmenu li.nav-item>a.nav-link.dropdown-toggle : :after { border-left: 0; } .whitebgg { background: linear-gradient(270deg, #fff 88%, #ffffff8a); z-index: 9; } .topmenu li.nav-item>a.nav-link : :after,.topmenu li.nav-item>a.nav-link : :before { position: absolute; left: 50%; width: 5px; height: 5px; border-radius: 10px; background: #30d9ed; content: ""; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); box-shadow: 0 0 11px 5px #2ae4fb80; } .topmenu .megadropdown>.nav-item .nav-link : :after { content: inherit !important; } .topmenu li.nav-item>a.nav-link : focus,.topmenu li.nav-item>a.nav-link : hover { color: #fff; } .topmenu li.nav-item>a.nav-link : focus : :after,.topmenu li.nav-item>a.nav-link : focus : :before,.topmenu li.nav-item>a.nav-link : hover : :after,.topmenu li.nav-item>a.nav-link : hover : :before { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } .megadropdown { position: absolute !important; left: 0 !important; width: 100%; height: 100vh; padding-top: 20px; padding-left: 5px; } #drag-container, #spin-container, .bluebg, .bluebg1, .box1, .darkbg, .flowbg, .servicebox1 { position: relative; } .dropdown-menu[data-bs-popper] { left: inherit; } .bgmenu : :after { background: #080b0e; position: absolute; z-index: -1; content: ""; width: 100%; height: 100vh; top: 58px; left: 0; transition: 0.1s 0.1s; } .megamenu .dropdown-menu { background: #fff0; border-radius: 0; background: linear-gradient(90deg, #0c2557 300px, #0e2961 10%); } .headingmenu { font-size: 17px; font-weight: 700; border-bottom: 1px solid #fdfeff1c; width: 290px; padding: 0 0 10px; cursor: pointer; xbackground: url(../images/nextarrow.svg) #0f2853; background-repeat: no-repeat; background-size: 12px; background-position: 96% 9px; margin-bottom: 10px; border-radius: 4px; } .headingmenu.vvv { xbackground: url(../images/nextarrow.svg) #113571 !important; background-repeat: no-repeat !important; background-position: 96% center !important; background-size: 13px !important; border-radius: 4px; } .megamenu .megadropdown > li { list-style: none; width: 280px; } .topmenu .megadropdown > li.select > a { background: url(../images/nextarrow.svg) var(--fcolor); background-repeat: no-repeat; background-position: 96% center; background-size: 17px; border-radius: 4px; color: #fff !important; } .megamenu .dropdown-menu > li { list-style: none; margin: 5px 0; margin-bottom: 6px !important; } .catmenu ul li { margin: 0; list-style: none; } .catmenu ul, section#services .col-lg-4, section#services1 .col-lg-4 { padding: 0; } .catmenu ul li a : hover { border-bottom: 1px solid #03beff; text-shadow: 0 0 10px var(--fcolor); } .catmenu ul li a { text-decoration: none; } li.nav-item.dropdown : hover .dropdown-menu { display: block; } li.nav-item.dropdown : hover .dropdown-menu.transmenu { display: none; } li.nav-item.dropdown.select .dropdown-menu.transmenu { display: block; } .lblue { color: #ddd; } .blue { color: #00b2ff; } .dark { color: #00374f; } .bluet { color: #1cbbff; } .lgrey { color: #3e3e3e; } .ltxt { color: #a5b8c5; } .gradbox { background: linear-gradient(101.59deg, #070709 41.49%, #1b1b22 101.53%); border-radius: 10px; padding: 15px; margin-bottom: 20px; } .ltxt : :marker { color: #fff; } .flowbg .col-lg-4 : nth-child(3n) .gradbox { background: linear-gradient(271.59deg, #070709 41.49%, #1b1b22 101.53%); } #services .col-lg-8, #services1 .col-lg-8, .bluebg .container, .bluebg1 .container, .flowbg .container { position: relative; z-index: 99; } #drag-container, #spin-container { display: -webkit-box; display: -ms-flexbox; display: flex; margin: auto; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-10deg); transform: rotateX(-10deg); } #drag-container img, #drag-container video { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 200px; font-size: 50px; text-align: center; -webkit-box-shadow: 0 0 8px #27a5d3; box-shadow: 0 0 8px #27a5d3; -webkit-box-reflect: below 10pxlinear-gradient( transparent, transparent, #0005 ); border-radius: 7px; } #drag-container img : hover,#drag-container video : hover { -webkit-box-shadow: 0 0 15px #0cf; box-shadow: 0 0 15px #0cf; -webkit-box-reflect: below 10pxlinear-gradient( transparent, transparent, #0007 ); } #drag-container p { font-family: Serif; position: absolute; top: 100%; left: 50%; -webkit-transform: translate(-50%, -50%) rotateX(90deg); transform: translate(-50%, -50%) rotateX(90deg); color: #fff; } #ground { width: 900px; height: 900px; position: absolute; top: 100%; left: 50%; -webkit-transform: translate(-50%, -50%) rotateX(90deg); transform: translate(-50%, -50%) rotateX(90deg); background: -webkit-radial-gradient( center center, farthest-side, #9993, transparent ); } @-webkit-keyframes spin { from { -webkit-transform: rotateY(0); transform: rotateY(0); } to { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } .bluebg { background: url(../images/scaling.jpg) center top/cover fixed; color: #fff; } section.bluebg : :after { background: linear-gradient( 180deg, rgb(0 166 255 / 0.8) 0, rgb(0 12 21 / 0.8) 100% ); content: ""; position: absolute; width: 100%; height: 100%; top: 0; } .bluebg1 { background: url(../images/home/empowerbg.jpg) center top/cover fixed; color: #fff; } section.bluebg1 : :after { background: linear-gradient(180deg, #182330 0, #160f05a3 100%); content: ""; position: absolute; width: 100%; height: 100%; top: 0; } .s-icon { width: 50px; margin-right: 10px; margin-bottom: 12px; } .servicebox1 h4 { font-size: 20px; } .s-icon img { width: 50px; object-fit: cover; height: 50px; } .picbox { float: left; margin: 20px; } .servicebox1 { padding-bottom: 65px !important; padding-top: 45px !important; border: 1px solid #03030305; width: 50%; float: left; } .servicebox1 a.btn { position: absolute; bottom: 20px; font-size: 14px; } .servicebox1 : hover { border: 1px solid #ccc; } #services1 .servicebox1 h4 { color: var(--scolor); font-weight: 600; } #services1 { background: xurl(../images/home/services-bg.svg) fixed; background-position: bottom left; background-size: auto 100vh; background-repeat: no-repeat; } section#services .sitec, section#services1 .sitec { max-width: 95%; } #services { background: url(../images/our-services-bg.svg) bottom left/auto 100vh no-repeat fixed; } .services .stickycont { top: 15%; } .wgradbg { background: linear-gradient(179deg, #fff 30%, transparent); padding-bottom: 100px; padding-top: 50px; padding-left: 75px; margin: 0 -94px; } .box1 : hover { color: #1eacff; } .box1 : :before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s; background-color: rgb(255 255 255 / 5%); transform: rotateY(0); z-index: 1; } @keyframes shine { 0% { transform: translateX(-100%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } } .box1 : hover : :before { opacity: 1; } .box1 { width: 20%; float: left; margin: 0; padding: 20px 0; perspective: 1000px; display: inline-block; } .box1 img { margin-bottom: 10px; width: 70px; transition: transform 0.5s; transform-style: preserve-3d; } .box1 : hover img { transform: rotateY(360deg); transition: transform 0.5s; } .box1 : :after,.box1 : :before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .lh { line-height: 155%; } .box1 : :after { xbackground-color: rgb(255 255 255 / 0.5); xtransform: rotateY(180deg); } .gradbg { background: linear-gradient(45deg, #071726, #0d2d4e); } .whychoose { xbackground-image: url(../images/whychooseus.svg); } .btn-outline-dark : hover { background-color: #1b52c1; border-color: #1b52c1 !important; } .btn-outline-dark : after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-110%); z-index: -9; transition: transform 1s; } .btn-outline-dark : hover : after { padding: 0; margin: 0; opacity: 1; transform: translateX(0); } .darkbg, .flowbg { background: #070709; } h1, h2, h3, h4, h5, h6 { font-weight: 800; font-family: Poppins, sans-serif; line-height: 1.2; } .h3, h3 { font-size: 35px; font-weight: 800; } .bigf h2 { font-size: 45px; } .bigf h3 { font-size: 50px; } .lf { font-weight: 400 !important; } .wf { font-weight: 700; } .mf { font-weight: 600; } p { font-family: "poppins", sans-serif; color: #3b4960; } h1 { font-size: 60px; } .text-center p { text-align: center !important; } .bigf { font-size: 70px; } .borderleft { border-left: 5px solid #1eaffc; padding-left: 30px; } .socialicons li { list-style: none; margin: 5px; } .socialicons { position: fixed; top: 45%; z-index: 998; left: 0; animation: 30s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite circle; xbackground: #0a1d49; border-radius: 53px; padding: 0; margin: 0; } .thankscont li { list-style: none; float: left; animation: inherit; opacity: 1; } .thankscont li img { width: 22px; } .thankscont .socialicons { animation: inherit; position: initial; z-index: 99; } .thankscont { justify-content: center; display: flex; } .socialicons li a { background: #42c534; display: table-cell; vertical-align: middle; text-align: center; border-radius: 45px; width: 45px; height: 45px; padding: 7px 10px; } .socialicons img { width: 21px; } @media (max-width: 1600px) { .sitec { max-width: 95%; } } @media screen and (max-width: 1400px), screen and (max-height: 800px) { .largef { font-size: 18px; } .bigf h2, .bigf h3 { font-size: 45px; } }