@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto:wght@300;400;500;700;900&display=swap');



:root {

    --brand-hex: 231, 0, 51;

    --brand: rgb(var(--brand-hex));

    --brand-2-hex: 0, 81, 149;

    --brand-2: rgb(var(--brand-2-hex));

    --dark: #212121;

    --body: #555;

    --border: rgba(0,0,0,0.08);

    --shadow: 0px 8px 32px rgba(0, 0, 0, 0.08);

    

}



html {

    height: 100%;

}



body {

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

    color: var(--body);

	font-size: 1.125rem;

    font-weight: 300;

    line-height: 1.5;

    height: 100%;

    display: flex;

    flex-direction: column;

}



main {

    flex: 1;

}



h1,h2 {

    color: var(--brand-2);

}



h3,h4,h5,h6,

.display-1,.display-2,.display-3,.display-4 {

    color: var(--dark);

}



h1,h2,h3,h4,

.display-1,.display-2,.display-3,.display-4 {

	font-family: 'Anton', sans-serif; 

}



.bg-cover {

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



img {

    width: 100%;

}



.shadow-rb {

    position: relative;

    z-index: 1;

}



.shadow-rb::after {

    content: '';

    position: absolute;

    z-index: -1;

    width: 90%;

    height: 90%;

    background: rgba(var(--brand-2-hex), .075);

    right: 0;

    bottom: 0;

    transform: translate(5%, 5%);

}



a {

    color: var(--brand-2);

    transition: all 0.4s ease;

    font-weight: 400;

	text-decoration: none;

}



a:hover {

    color: var(--brand);

}



.main {

    height: 100%;

}



section {

    padding-top: calc(20px + 4vw);

    padding-bottom: calc(20px + 4vw);

}



.text-brand {

    color: var(--brand) !important;

}





.hero-slider .owl-prev,

.hero-slider .owl-next{

    background-color: rgba(255, 255, 255, 0.3) !important;

    width: 60px !important;

    height: 60px !important;

    display: block;

    display: grid;

    place-items: center;

    color: #fff !important;

    border-radius: 100px;

    line-height: 0;

    border-radius: 100px !important;

    position: absolute;

    top: 50%;

    font-weight: 600 !important;

    font-size: 12px !important;

    transition: all 0.4s ease;

    margin-top: -30px !important;

}



.owl-prev {

    left: 0;

}

.owl-next {

    right: 0;

}



.hero-slider .owl-prev:hover,

.hero-slider .owl-next:hover {

    background-color: var(--brand) !important; 

}



.owl-dot.active span{

    background-color: var(--brand) !important;

}





 /* slide */

 .slide {

     min-height: 70vh;

     display: flex;

     align-items: center;

     justify-content: center;

     position: relative;

}



.slide1 {

    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



.slide2 {

    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



.slide .heading {

    text-transform: uppercase;

    color: #fff;

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

	line-height: 1;

}



.slide-content {

	background: rgba(0, 0, 0, 0.7);

	border-radius: 10px;

	padding: 24px;

		

}



.slide h6 {

	font-size: clamp(1rem,1.8vw,1.8rem);

}





/* Banner */

.banner {

    min-height: 60vh;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

}



.banner .heading {

    text-transform: uppercase;

    color: #fff;

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

	line-height: 1;

    animation: fadeUp 500ms ease-out ;

}

@keyframes fadeUp {

    0% {

        transform: translateY(50px);

        opacity: 0;

    }

    100% {

        transform: translateY(0);

        opacity: 1;

    }

}

.banner h6 {

	font-size: clamp(1rem,1.8vw,1.8rem);

}







/* navbar */

.top-nav {

    background-color: var(--brand);

    color: #fff;

    padding-top: 5px;

    padding-bottom: 5px;

}



.top-nav a {

    color: #fff;

}

.top-nav a:hover {

    color: var(--dark);

}



.top-nav p {

    display: inline-block;

    margin-bottom: 0;

    margin-right: 10px;

}



.top-nav span,

.top-nav i {

    vertical-align: middle;

}



.navbar {

    box-shadow: var(--shadow);

}



.social-icons-mobile a {

    width: 28px;

    height: 28px;

    display: inline-flex;

    color: #fff;

    background-color: var(--dark);

    text-decoration: none;

    align-items: center;

    justify-content: center;

    border-radius: 100px;

}





.social-icons a {

    width: 28px;

    height: 28px;

    display: inline-flex;

    color: #fff;

    background-color: rgba(255, 255, 255, 0.25);

    text-decoration: none;

    align-items: center;

    justify-content: center;

    border-radius: 100px;

}



.social-icons a:hover {

    background-color: #fff;

    color: var(--brand);

}

.conditions-section{

    margin: 20px 0;

}

.conditions-section a{

   color: #fff;

   margin: 0 10px;

}



.navbar .navbar-nav .nav-link {

    color: var(--dark);

}



.navbar .navbar-nav .nav-link:hover {

    color: var(--brand);

}



.navbar .navbar-nav .nav-link.active {

    color: var(--brand);

}



.navbar-brand {

    font-size: 28px;

    font-weight: 700;

	display: inline-block;

	width: 180px;

}



.navbar-brand .dot {

    color: var(--brand);

}



.btn {

    padding: 8px 26px;

}



.btn-brand {

    border-color: var(--brand);

    background-color: var(--brand);

    color: #fff;

}



.btn-brand:hover {

    background-color: rgba(var(--brand-hex), .8);

    border-color: rgba(var(--brand-hex), .8);

    color: #fff;

}



.btn-brand-2 {

    border-color: var(--brand-2);

    background-color: var(--brand-2);

    color: #fff;

}



.btn-brand-2:hover {

    background-color: rgba(var(--brand-2-hex), .8);

    border-color: rgba(var(--brand-2-hex), .8);

    color: #fff;

}



.intro {margin-bottom: 36px;

text-align: center;}



.intro p {

    max-width: 65ch;

}

.intro h6{

    color: var(--brand);

    font-weight: 400;

    text-transform: uppercase;

}



.intro h1 {

    margin-top: 15px;

    margin-bottom: 15px;

}



.info-box {

    align-items: center;

    display: flex;

}



.info-box img {

    width: 90px;

}





#milestone {

    background: var(--brand);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



#milestone h1,

#milestone p {

    color: #fff;

}



.service {

    padding: 0px;

	min-height: 210px;

    box-shadow: var(--shadow);

}



.service h5 {

    margin-top: 24px;

    margin-bottom: 14px;

}



.service-item img {

    aspect-ratio: 1/1;

	object-fit: cover;

	border-radius: 8px;

}









/* PROJECT SECTION */

.project {

    position: relative;

    overflow: hidden;

    z-index: 2;

}



.project h6 {

    font-weight: 400;

}



.project h6::before {

    content: "";

    height: 2px;

    width: 30px;

    display: inline-block;

    background: var(--brand);

    vertical-align: middle;

    margin-right: 10px;

}



.project-item {

	aspect-ratio: 5/3;

	object-fit: cover;

    overflow: hidden;

}



.project .content {

    position: relative;

    color: var(--dark);

    padding-top: 1rem;

    padding-left: 0;

    padding-right: 0;

}

@media (max-width:575px) {

    .project .content {

        padding-left: 1rem;

        padding-right: 1rem;

    }

}



.project h2 {

    font-size: clamp(1.2rem, 2vw, 2.2rem);

}



.project p {

    max-width: 65ch;

    font-size: clamp(1rem, 1.2vw, 1.2rem);

}



@media (hover: hover) {

    .project {

        cursor: pointer;

    }

    .project .overlay {

        width: 100%;

        height: 50%;

        position: absolute;

        bottom: 0;

        left: 0;

        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--dark) 100%);

        transform: translateY(100%);

        transition: transform 350ms ease-out;

    }



    .project .content {

        position: absolute;

        left: 6%;

        bottom: 5%;

        color: var(--bs-light);

        transform: translateY(100%);

        opacity: 0;

        transition: all 200ms ease-out;

    }



    .project h2 {

        color: var(--bs-light);

    }



    .project:hover .overlay {

        transform: translateY(0);

        transition: transform 250ms ease-out;

    }

    .project:hover .content  {

        transform: translateY(0);

        opacity: 1;

        transition: all 400ms ease-out;

    }

}







/* TEAM SECTION */

.team-member {

    text-align: center;

}



.team-member .image{

    position: relative;

    z-index: 2;

    overflow: hidden;

}



.team-member .overlay {

    width: 100%;

    height: 100%;

    position: absolute;

    left: 0;

    top: -10%;

    background-color: rgba(255, 77, 41, 0.7);

    opacity: 0;

    transition: all 0.4s ease;

}



.team-member h5 {

    margin-top: 16px;

    margin-bottom: 4px;

}



.team-member .social-icons {

    position: absolute;

    top: 60%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 2;

    opacity: 0;

    transition: all 0.4s ease;

}



.team-member .social-icons a {

    width: 40px;

    height: 40px;

}



.team-member:hover .social-icons {

    top: 50%;

    opacity: 1;

}



.team-member:hover .overlay {

    top: 0%;

    opacity: 1;

}



#reviews {



    background: linear-gradient(-90deg, rgba(8, 32, 50, 0.8), rgba(8, 32, 50, 0.8)), #082032;;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



.review {

    text-align: center;

    z-index: 2;

    position: relative;

    margin: 15px;

    max-width: 768px;

    margin: auto;

}



.review .bxs-quote-alt-left {

    font-size: 120px;

    position: absolute;

    opacity: 0.1;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    color: #fff;

}



.review img {

    width: 80px !important;

    height: 80px;

    border-radius: 100px;

    margin: auto;

}



.review h5 {

    margin-top: 16px;

    margin-bottom: 4px;

    color: #fff;

}



.review h3 {

    margin-top: 26px;

    margin-bottom: 26px;

    font-size: 22px;

    color: #fff;

    font-weight: 400;

    line-height: 1.7;

}



.review small {

    color: var(--brand);

}



.review .stars {

    color: var(--brand);

}



.blog-post {

    position: relative;

    background-color: #fff;

    box-shadow: var(--shadow);

}



.blog-post .content {

    padding: 32px;

}



.blog-post a {

    position: absolute;

    top: 20px;

    left: 20px;

    background-color: var(--brand);

    padding: 2px 12px;

    border-radius: 100px;

    text-decoration: none;

    color: #fff;

}



.blog-post h5 {

    margin-top: 12px;

    margin-bottom: 12px;

}



.blog-post small {

    text-transform: uppercase;

    color: var(--brand);

    text-decoration: none;

}



footer {

    flex-shrink: 0;

    background: linear-gradient(0deg, rgba(8, 32, 50, 0.9), rgba(8, 32, 50, 0.9)), #082032;;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



footer .footer-top {

    padding-top: 80px;

    padding-bottom: 40px;

}



.footer-bottom {

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

    padding-bottom: 20px;

    padding-top: 20px;

}



footer .navbar-brand {

    color: #fff;

}



footer p {

    color: #ADB3B9;

}



footer .social-icons a {

    width: 50px;

    height: 50px;

    font-size: 20px;

    margin-left: 4px;

    margin-right: 4px;

}



.loader {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: red;

    z-index: 99999;

    position: fixed;

    left: 0;

    right: 0;

}





/* Form */

.input-group {

    position: relative;

  }

  .input-group input {

    height: calc(50px + 0.5vw);

  }

  .input-group .form-control {

    padding-left: 2.4rem;

    vertical-align: middle;

    border: 1px solid;

    background-color: var(--bs-white);

    border-color: var(--bs-light-grey);

    margin-bottom: calc(1rem + 0.5vw);

  }

  .input-group .form-control:focus {

    box-shadow: none;

    border-color: var(--brand);

  }

  .input-group .input-box-icon {

    position: absolute;

    top: 50%;

    left: 1.5rem;

    color: #212529 !important;

    opacity: 0.5;

    z-index: 999;

    transform: translateY(-50%);

    padding-bottom: calc(1rem + 0.5vw);

  }

  .input-group .input-box-icon.fa-message {

    top: 22%;

  }







/* Set Background */

.set-bg {

   position: relative;

	z-index: 0;

   background-repeat: no-repeat;

   background-size: cover;

   background-position: top center;

}



.set-bg .filter {

	position: absolute;

	top: 0;

	left: 0;

	z-index: -1;

	width: 100%;

	height: 100%;

}







.filter-30 {

	background-color: rgba(20, 38, 63, 0.3);

}

.filter-50 {

	background-color: rgba(20, 38, 63, 0.5);

}

.filter-70 {

	background-color: rgba(20, 38, 63, 0.7);

}

.filter-blur-5 {

	backdrop-filter: blur(5px);

}







/* Contact Info */

.info-wrapper {

	display: flex;

}



.icon-holder {

	display: flex;

	justify-content: center;

	align-items: center;

	width: 36px;

	height: 36px;

	margin-right: 16px;

	background: var(--brand);

	color: white;

	border-radius: 50%;

	

}