@font-face {
font-family: 'VeloSans';
src: url("../fonts/VeloSansDisplay.woff2");
}
*{
padding: 0px;
margin: 0px;
font-family: VeloSans;
}
body{
letter-spacing: 0.5px;
}.index-navbar{
background-color: transparent !important;
z-index: 1;
position: absolute;
bottom: 420px;
padding: 40px;
}
.navbar{
padding: 40px;
}.navbar-toggler:focus {
box-shadow: none !important;
}
.nav-logo{
width: 70%;
height: auto;
}
.nav-icon{
color: white !important;
border: none !important;
}
.navbar-toggler:focus{
border: none !important;
}
.navbar-toggler{
border: none !important;
}
.offcanvas-body ul li a{
color: white !important;
font-size: 24px !important ;
line-height: 60px;
}
.offcanvas.offcanvas-end{
width: 100% !important;
}
.offcanvas-header{
position: absolute;
right: 50px;
}
.nav-link{
font-size: 24px;
}
.hero-section-div-who{
background-image: url("../images/HOMEPAGE-–Hero-3.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
height: 270px;
}
.hero-section-div-what{
background-image: url("../images/HOMEPAGE-–Hero-1.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
height: 270px;
}
.hero-section-div-work{
background-image: url("../images/HOMEPAGE-–Hero-2.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
height: 270px;
}
.hero-section-div-contact{
background-image: url("../images/HOMEPAGE-–Hero-4.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
height: 270px;
}
.hero-section > .hero-section-div{
padding: 440px 40px 40px;
}
#hero h1{
font-size: 75px;
text-align: center;
padding-bottom: 0px;
margin-bottom: 0px;
color: #ffffff ;
opacity: 1;
}
.custom-hero-section {
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
}
.custom-background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1; /* Ensure video is behind text and overlay */
}
.custom-hero-section h1 {
color: white;
font-size: 3em;
text-align: center;
position: absolute;
top: 50%;
transform: translate(36% ,80%);
z-index: 1; /* Ensure text is above video */
}
/* Overlay to apply light blue color */
.custom-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:#0c23406e; /* Light blue with 50% opacity */
z-index: 0; /* Ensure overlay is behind text */
}
.who-we-section h5{
letter-spacing: 0.2em;
color: #0C2340;
}
#hero .hero-section-div h1 {
opacity: 1 !important;
}
.navbar-color {
height: 74px;
}
.who-we-section p{
/* margin-bottom: 0.3em; */
}
/* ......end... */
.section1{
background-color: #0C2340;
}
.offcanvas-body{
background-color: #0C2340;
color: white !important;
}
.section1{
background-color: #0C2340;
color: white;
padding: 8px;
}
.section4-1 h1{
font-size: 35px;
}
.navbar-color {
transition: background-color 0.3s ease;
}
.navbar-color.back-color {
background-color: #0c2340 !important;
height: 74px;
}
.nav-logo-scroll {
width: 45%;
height: auto;
}
.section1-btn{
border: 3px solid #FBDE64 !important;
color: #FBDE64 !important;
border-radius: 0px !important;
font-family: Nunito Sans, sans-serif;
font-size: 15px;
letter-spacing: 0.15em;
font-weight: 700;
text-transform: uppercase;
text-align: center;
padding: 5px 15px;
margin-top: 5px;
}
.section1-btn:hover{
background-color: #FBDE64 !important;
color: black !important;
border-radius: 0px !important;
}
.section2{
background-color: #041326;
color: white;
padding: 8px;
}
.section2-card1, .section2-card2, .section2-card3 {
min-height: 250px;
display: flex;
align-items: flex-end;
position: relative;
overflow-x: hidden;
overflow-y: hidden;
padding: 20px;
border-radius: 10px;
color: var(--base-2);
}
.section2-card1:before{
content: "";
background-image: url('../images/Service-3-1.png');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: inherit;
border-radius: 10px;
pointer-events: none;
transition: all 0.5s ease;
}
.section2-card1:after {
content: "";
background-image: linear-gradient(195deg, rgba(255, 255, 255, 0.1) 50%, #0c2340 90%);
z-index: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
}
.section2-card1, .section2-card3, .section2-card3 h2 {
/* z-index: 1; */
position: relative;
color: var(--base-2);
} h2 {
z-index: 1;
position: relative;
color: var(--base-2);
} h2 {
z-index: 1;
position: relative;
color: var(--base-2);
}
.section2-card2:before{
content: "";
background-image: url('../images/Prototyping.png');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: inherit;
border-radius: 10px;
pointer-events: none;
transition: all 0.5s ease;
}
.section2-card2:after {
content: "";
background-image: linear-gradient(195deg, rgba(255, 255, 255, 0.1) 50%, #0c2340 90%);
z-index: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
}
.section2-card3:before{
content: "";
background-image: url('../images/Production-2.png');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: inherit;
border-radius: 10px;
pointer-events: none;
transition: all 0.5s ease;
}
.section2-card3:after {
content: "";
background-image: linear-gradient(195deg, rgba(255, 255, 255, 0.1) 50%, #0c2340 90%);
z-index: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
}
.section3{
background-color: #C0CFE2;
padding-top: 50px;
padding-bottom: 70px;
}
.section3-btn{
border: 3px solid #332E49!important;
color: #004DD6 !important;
border-radius: 0px !important;
font-family: Nunito Sans, sans-serif;
font-size: 15px;
letter-spacing: 0.15em;
font-weight: 700;
text-transform: uppercase;
text-align: center;
padding: 5px 15px;
margin-top: 45px;
}
.section-heading{
font-size: 14px;
letter-spacing: 0.2em;
font-weight: 800;
text-transform: uppercase;
text-align: center;
padding-bottom: 15px;
margin-bottom: 0px;
color: #C0CFE2;
}
.section3-btn:hover{
background-color: #004DD6 !important;
color: white !important;
border-radius: 0px !important;
}
.logos{
width: 180px;
height: auto;
margin: 10px;
}
.section4{
background-color: #0C2340;
color: #9C999B;
padding-top: 90px;
padding-bottom: 90px;
}
.section4-1{
background-color: #004DD6;
color: white;
border-radius: 10px;
}
footer{
background-color: #041326;
padding-bottom: 100px;
font-family: VeloSans;
}
.footer-icon{
color: white;
}
.footer-line{
border-top: 2px solid white;
}
/* ///////////////////// second ////////////////////// */
.text {
color: white;
/* font-size: 10px; */
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #0C2340;
color: white;
}
.who-card:hover .overlay {
opacity: 1;
}
.image {
display: block;
width:307px;
height: auto;
}
.who-card {
position: relative;
width: 100%;
margin-top: 20px;
}
/* /////////////////// third //////////////////////// */
.line1{
border-top: 2px solid #0C2340 ;
}
h6{
color: #004DD6 !important;
}
/* //////////// team ////////// */
.team-container{
background-color: #041326;
}
.team-img{
}
.team-img img {
width: 100%;
height: 95%;
margin-top: 10px;
transition: transform 0.3s ease-in-out;
}
.team-img img:hover {
transform: scale(1.05);
border-radius: 10px;
}
.footer .social-icon ul li{
list-style: none;
display: inline-block;
}
.footer{
padding: 40px 0 0 0;
}
.footer ul{
margin-bottom: 0;
}
.footer .social-icon ul li a{
background: white;
padding: 3px 10px;
font-size: 33px;
border-radius: 25px;
color: #0f335e;
margin: 0 10px;
margin-top: 15px;
}
.footer .social-icon ul li a i{
color: #0f335e !important;
}
.footer .brand {
color:white;
}
.footer .brand h4 {
font-size: 18px;
font-weight: 700;
padding-bottom: 15px;
}
.footer .brand p {
font-size: 19px;
font-weight: 600;
}
.footer .brand a {
color: white;
text-decoration: none;
font-size: 19px;
}
.footer .menu-style ul li a{
color: white;
text-decoration: none;
font-size: 19px;
}
.footer .menu-style ul li{
list-style: none;
padding: 7px 0;
}
.footer-bottom{
color: white;
border-top: 1px solid white;
padding: 25px 0;
}
.footer-bottom p{
margin-bottom: 0;
}
/* //////////// contact ////////// */
.contact-container{
background-color: #041326;
color: white;
}
.demo-gallery-poster{
padding-bottom: 100px;
}
.demo-gallery-poster img{
border-radius: 25px;
margin-bottom: 25px;
/*height: 664px;*/
width: 356px !important;
margin: 0 auto;
}
.demo-gallery-poster img{
border-radius: 25px;
margin-bottom: 25px !important;
height: 356px;
}
.demo-gallery-poster img:hover {
box-shadow: -4px 11px 27px 1px rgba(175, 176, 186, 0.39);
-webkit-box-shadow: -4px 11px 27px 1px rgba(175, 176, 186, 0.39);
-moz-box-shadow: -4px 11px 27px 1px rgba(175, 176, 186, 0.39);
}
.demo-gallery-poster img:hover {
box-shadow: -4px 11px 27px 1px rgba(175, 176, 186, 0.39);
-webkit-box-shadow: -4px 11px 27px 1px rgba(175, 176, 186, 0.39);
-moz-box-shadow: -4px 11px 27px 1px rgba(175, 176, 186, 0.39);
}
/* ..............................media querry........... */
@media only screen and (min-width: 425px) and (max-width:768px){
.custom-hero-section h1 {
top: 69%;
transform: translate(21% ,80%) !important;
}
.custom-hero-section {
height: 500px;
}
.nav-logo{
width:150PX;
}
#hero h1 {
font-size: 50px;
}
.nav-icon {
font-size: 15px;
}
.offcanvas-header {
right: 1px;
top: 8px;
}
.offcanvas-header button{
font-size: 10px;
}
.navbar-color {
height: 74px;
}
}
@media only screen and (min-width: 425px) and (max-width:700px){
.custom-hero-section h1 {
top: 69%;
transform: translate(15% ,80%) !important;
font-size: 30px !important;
}
.custom-hero-section {
height: 300px;
}
.overlay{
width: 93.5%;
}
.index-navbar{
bottom: 0;
}
.logos{
margin: 0;
width: 99px;
}
.nav-icon {
font-size: 15px;
}
}
@media only screen and (min-width: 320px) and (max-width:424px){
.custom-hero-section h1 {
top: 55%;
transform: translate(11% ,80%) !important;
font-size:25px !important;
}
.custom-hero-section {
height: 300px;
}
.nav-logo{
width:150PX;
}
footer{
text-align: center;
}
br{
display:unset;
}
.overlay{
/* width: 93.5%; */
}
#hero h1 {
font-size: 50px;
}
.hero-section > .hero-section-div{
padding: 80px 20px 80px;
}.index-navbar{
bottom: 0;
}
.logos{
margin: 0;
width: 99px;
}
.nav-icon {
font-size: 15px;
}
.offcanvas-header {
right: 1px;
top: 8px;
}
.offcanvas-header button{
font-size: 10px;
}
.navbar-color {
height: 74px;
}
}