@charset "UTF-8";
@import url("../css/bootstrap.min.css");
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500&display=swap');
*,
*::before,
*::after {
  box-sizing: border-box;
  box-sizing: border-box;
  scroll-behavior: smooth;
  transition: 0.5s ease-in;
}


@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}
body {
  font-family: 'Ubuntu', sans-serif;
  padding:0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden;
}

p{
  font-size: 16px;
  line-height: 30px !important;
  color: #000000 !important; 
}

span{
  font-family: 'Ubuntu', sans-serif;
  font-size: 18px;

}
nav{
  background-color: #184984 !important;
  color: #ffffff!important;

}

  .offcanvas{
    background-color: #184984 !important;
   
  }
  .navbar-brand{
      color: #ffffff!important;
      font-size: 25px;

  }
  .navbar-brand span{
      color: #000000 !important;
  }
  .navbar-toggler{
    
    width: 20px;
    height: 20px;
    position: relative;
    transition: 0.5s ease-in-out;
  }
  .navbar-toggler,
  .navbar-toggler:focus,
  .navbar-toggler:active,
  .navbar-toggler-icon:focus{
    outline: none;
    box-shadow: none;
    border: 0;
  
  }
  .navbar-toggler span{
    margin: 0;
    padding: 0;
  
  }
  .toggler-icon{
    width: 100%;
    height: 2px;
    background-color: #ffffff !important;
    margin-right: 40px !important;
    display: block;
    position: absolute;
    border-radius: 1px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: 0.25s ease-in-out;
  }
  .middle-bar{
    margin-top: 0px;
  
  }

  /*when navigation is clicked*/
  .navbar-toggler .top-bar{
    margin-top: 0px;
    transform: rotate(135deg)
  }
  .navbar-toggler .middle-bar{
    opacity: 0;
    filter: alpha (opacity=0);
  }
  .navbar-toggler .bottom-bar{
   margin-top: 0px;
   transform: rotate(-135deg);
  }
  
  /*state when navbar is collapsed*/
  .navbar-toggler.collapsed .top-bar{
    margin-top: -20px;
    transform: rotate(0deg);
  }
  .navbar-toggler.collapsed .middle-bar{
  opacity: 1;
  filter: alpha (opacity=100);
  }
  .navbar-toggler.collapsed .bottom-bar{
    margin-top: 20px;
    transform: rotate(0deg);
  }
  /*---------navbar ends----------------*/
  .nav-link{
    margin-left: 20px !important;
    color: #ffffff !important;
    font-size: 16px !important;
  }
#hero{
  padding: 0px;
  
}

#hero h6{
  color: #000000 !important;
  font-weight: 700 !important;
}

#hero h6 span {
  color: #ffffff;
  padding: 10px;
  background-color: #184984 !important;
  border-radius: 15px;
}
/* #hero p{
  line-height: 40px !important;
} */
#hero div.content{
position: relative;

}
#hero h1{
	color: #fff;
  font-size: 2rem;
	position: absolute;
	transform: translate(-2%, -100%);
}

#hero h1:nth-child(1) {
	color: transparent;
  -webkit-text-stroke: 2px #184984;
}

#hero h1:nth-child(2) {
	color: #184984;
	animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
	0%,
	100% {
		clip-path: polygon(
			0% 45%,
			16% 44%,
			33% 50%,
			54% 60%,
			70% 61%,
			84% 59%,
			100% 52%,
			100%
       100%,
			0% 100%
		);
	}

	50% {
		clip-path: polygon(
			0% 60%,
			15% 65%,
			34% 66%,
			51% 62%,
			67% 50%,
			84% 45%,
			100% 46%,
			100% 100%,
			0% 100%
		);
	}
}
.hero-image{
  border-radius: 25% 67% 0% 69% / 0% 49% 0% 50%;
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 
}

#services .boxes {
  color: #000000 !important;
  border-radius: 15px !important;
  padding: 20px !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;

}
#services img{
   margin: 10px !important;
   width: 70px !important;
   margin-bottom: 10px !important;
}
#projects img{
  height: 100% !important;
}
div.colors .red{
  /* height: 100px !important;
  width:250px !important; */
  background-color: #852120 !important;
  color: #fff;
  font-weight: 700 !important;
  text-align:center;
  padding: 40px !important;
}

div.colors .grey{
  /* height: 100px !important;
  width:250px !important; */
  background-color: #303234 !important;
  color: #fff;
  font-weight: 700 !important;
  text-align:center;
  padding: 40px !important;
}

div.colors .peach{
  /* height: 100px !important;
  width:250px !important; */
  background-color: #F4E9E8 !important;
  color: #fff;
  font-weight: 700 !important;
  text-align:center;
  padding: 40px !important;
}
#thoughts img{
  width: 100% !important;
  height: auto;
  border-radius: 5px !important;
  
}
#thoughts .articles{
  box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
  background-color: #F5F5F5 ;
  padding: 20px !important;
  margin-top: 30px ;
  border-radius: 15px !important;
}
.bi-arrow-right{
  color: #184984 !important ;
  width: 100% !important;
  
}
#thoughts a{
  color: #184984 !important;
}
.card-block {
  font-size: 1em;
  position: relative;
  margin: 0;
  padding: 1em;
  border: none;
  border-top: 1px solid rgba(34, 36, 38, .1);
  box-shadow: none;
   
}

.card {
  font-size: 1em;
  overflow: hidden;
  padding: 5;
  border: none;
  border-radius: .28571429rem;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
  margin-top:20px;
}

.card img{
  height: 100% !important;
  width: 100% !important;
}

.btn {
  background-color: #184984 !important;
  border: none !important;
  
}

ul {
  list-style-type: none;
}

a,
a:hover {
  text-decoration: none;
}

#testimonials{
  background-color: #F5F5F5;
}

.testimonials .slide img{
  width: 50px;
  margin-right: 20px;
   
}

.testimonials .card1 {
  background-color: #ffffff;
  border-radius: 10px;
  height: 380px;
  width: 100%;
}

.bi-quote{ 
  font-size: 70px;
  text-align: start !important;
  color: #C1D2E7;
}

.card .mobilevieshow {
  display: block;
}

.card .mobileviewhide {
  display: none;
}


.connect-container{
  border-radius: 15px;
  background-color: #C1D2E7;
  color: #000000;
  height: 50vh;
  width: 100%;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.connect-container a {
  background-color: #184984; 
  color: white; 
  padding: 15px 30px; 
  border: none !important; 
  border-radius: 15px;
  font-size: 15px; 
  cursor: pointer; 
  box-shadow: 0 4px 8px rgba(24, 68, 161, 0.2);
  transition: background-color 0.3s ease-in-out; 
}

.connect-container a:hover {
  background-color: #0F2B7B; 
  transform: scale(1.1); 
  color: #ffffff !important ;
}

.custom-button:active {
  background-color: #184984;
}

.brand-bg-color {
  background-color: #184984; 
}

.footer .row {
  margin-top: 30px;
}
.footer img{
  width: 100px;
  
}

.bi-check-circle{
  color: #184984 !important;
  font-size: 20px !important;
}

.footer p{
  color: #ffffff !important;
}

/********** RESPONSIVENESS **********/

/* For 480 Resolution - Laptop*/
@media(min-width: 320px) and (max-width: 480px) {
  /* STYLES GO HERE */


#home img{
  transform: none;
}

}
/* For 640 Resolution - mobile */
@media only screen and (min-device-width: 360px) and (max-device-width: 640px) {

  
  
  .carousel-first img{
 width:100vw !important ;
 height: 75vh !important;
  display: block !important;
}

/* For 1024 Resolution - laptop 1 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
 
}

/* For 1366 Resolution  -- laptop 2*/
@media only screen and (min-width: 1030px) and (max-width: 1366px) {
  /* STYLES GO HERE */
}

/** desktop screen */
@media only screen and (min-width: 1370px) and (max-width: 1605px) {
  /* STYLES GO HERE */
}

/*Ipad Orientation : Landscape */
@media only screen and (orientation: landscape) and (min-device-pixel-ratio: 1) and (min-device-width: 768px) and (max-device-width: 1007px) {
  /* STYLES GO HERE */
}

/*ipad Orientation : Portrait */
@media only screen and (orientation: portrait) and (min-device-pixel-ratio: 1) and (min-device-width: 768px) and (max-device-width: 1007px) {
  /* STYLES GO HERE */
}
}