@import 'stylesheet.css';
@import 'responsive.css';
@import 'services.css';
@import 'about.css';


html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;

}

body {
    font-family: 'manroperegular' !important;
    overflow-x: hidden;
    /* background-color: #f5f5f5!important; */
}



.navbar {
    color: rgba(0, 36, 87, 1);
    /* height: 8vh!important; */
}

.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {}

#som {
    margin-left: -70px;
    opacity: 0;
    transition: all 0.2s ease;
}

.navbar a {
    font-family: 'manropesemibold' !important;
    margin-right: 50px !important;
    position: relative;
}

.navbar li .active::before {
    content: '';
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background: rgba(0, 36, 87, 1);
    filter: drop-shadow(0px 0px 3px rgba(0, 36, 87, 1));
}

li .active,
li a {
    transition: all 1s ease;
    color: #002457 !important;
}

li a:hover {
    filter: drop-shadow(0px 0px 10px rgba(0, 36, 87, 1));
}

.dropdown-toggle::after {
    display: inline !important;
    padding: 0 !important;
    vertical-align: 0 !important;
    padding: 0.255rem !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    content: url('../images/arrowDown.png') !important;
}

.banner {
    height: 100vh;
    background: rgb(0, 36, 87);
    background: -moz-linear-gradient(90deg, rgba(0, 36, 87, 1) 0%, rgba(188, 252, 255, 1) 49%, rgba(252, 241, 69, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(0, 36, 87, 1) 0%, rgba(188, 252, 255, 1) 49%, rgba(252, 241, 69, 1) 100%);
    background: linear-gradient(90deg, rgba(0, 36, 87, 1) 0%, hsl(182.69deg 100% 86.86%) 49%, rgba(252, 241, 69, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#002457", endColorstr="#fcf145", GradientType=1);
    display: flex;
    padding-right: 0 !important;
}

.titleCol {
    width: 45%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    padding: 250px 0 250px 250px;
    flex-direction: column;
    color: #fff;
}

.websiteButton {
    z-index: 1;
    border: none;
    width: 200px;
    height: 60px;
    border-radius: 2px;
    display: flex;
    place-content: center;
    transition: all 0.8s ease;
    place-items: center;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2);
    text-align: center;
    /* background: linear-gradient(135deg, hsl(197, 100%, 46%), hsl(56, 97%, 63%));
     */
    background-color: #ffdf00;
    font-size: larger;
    margin-block: 10px;

}

.websiteButton:hover {

    transform: scale(1.05);
    box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.5);
}


.websiteButton a {
    font-family: 'manropebold' !important;
    text-decoration: none;
}

.bannerArrow {
    align-self: left;
    text-align: center;
    display: flex;
    align-items: center;
}

.bannerArrow p {
    margin: 0;
    padding-left: 10px;
}

.bannerTitle {
    text-align: left;

}

.bannerTitle h1 {
    font-size: 4rem;
    font-family: 'manropebold';

}

.bannerTitle div::first-letter {
    color: #ffdf00;
}

.bannerArrow img {
    padding: 5px;
}

.imagesCol {
    display: flex;
    height: 100vh;
    position: relative;
    width: 75%;
    overflow: hidden;
    z-index: 1;
}


.imagesContainer {
    min-width: 40%;
    display: flex;
    margin: 10px;

    flex-direction: column;
}

.imageBox {
    min-height: 500px;
    margin: 10px;

}

.imageBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.5);
}

.imagesContainer:nth-child(1),
.imagesContainer:nth-child(2) {
    margin-top: -70px;
}

.imagesContainer:nth-child(3) {
    margin-top: -350px;
}


.imagesContainer:nth-child(2)>.imageBox {
    min-height: 350px;
}



/* /////////////////FOR CARDS/////////////////// */
.card {
    border: none !important;
    transition: all 1s ease;
    box-shadow: -5px -5px 10px 0.2px rgba(0, 0, 0, 0.2);
}


.websiteCard {
    display: flex;
    /* margin: 10px; */
    box-shadow: -2px -2px 20px 0px #41464b52;
    width: 100%;
    border-radius: 12px;
    height: 250px;
}

.websiteCard img {
    min-width: -webkit-fill-available;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
}

.websiteCardHover {
    transition: all 0.5s ease;
}

.websiteCardHover:hover {

    color: rgb(0, 60, 145);
    transform: translateY(-10px);

}

footer img:hover,
footer svg:hover {

    transform: scale(1.08) !important;
    transition: all 0.5s ease;

}

footer {
    user-select: none;
}

/* ///////////////////Mouse Trail///////////////// */

.trail {
    width: 15px;
    height: 15px;
    border-radius: 70%;
    background: rgba(0, 119, 255, 0.464);
    position: fixed;
    animation: come 1s linear forwards;
    z-index: 0;
}

@keyframes come {
    0% {
        transform: scale(0);
    }

    10% {
        transform: scale(1) translateY(0px);
        opacity: 1;
    }

    100% {
        transform: scale(0) translateY(-50px);
        opacity: 0
    }
}

.card-cover {
    position: relative;
    transition: all 1s ease;
}

.card.card-cover:hover {
    rotate: -5deg;
}

.card.card-cover:hover .cardCover {
    rotate: 10deg;
    opacity: 1;

}

.cardCover {
    opacity: 0;
    transition: all 1.5s ease;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    backdrop-filter: blur(10px);
    font-size: larger;

    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}



.websiteButtonMore {
    width: 200px;
    margin: 0 auto;
}


.somlog {
    opacity: 1;
    transition: all 0.3s ease;
}

.somlogmin {
    opacity: 0;
    transition: all 0.3s ease;
}

.placeContent {
    place-content: center !important;
}