@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,500;1,600;1,800&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;

}
:root {
  --main-bg-color: #24738b; 
  /* --main-bg-color: #107E7D;  */
  --nav-text-color:#FDCA40;
  --nav-hover-color:#ffffff;
  --heading:#610345;
}      
/* .navbar-brand span{
  color:var(--nav-hover-color);
  font-size: 25px;
  font-weight: 800;
 }                         */
 .nav-item .nav-link {
  color:var(--nav-text-color) !important  ;
  padding: 0px 0px 0px 10px !important;
  
}
.nav-item a:hover {
  color:var(--nav-hover-color) !important; 
}       

.heading{
  color:  var(--heading);
  font-size: 24px;
  border-left:5px solid #000000;
}

body {
  font-family: 'Poppins', sans-serif;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #797979;
  /* background: url(img/modern-bridge.jpg); */
  background: url(img/blue-abstract-layered-stripes-background.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}

/* ---------Intro starts---------- */
.introcolumn {
  float: left;
  /* width: 33.33%; */
  padding: 5px;
  background-color: #ffffff;
}
.introcolumn:nth-child(1),
.introcolumn:nth-child(2) {
  width: 33.33%;
}

.introcolumn:nth-child(3) {
  width: 33.33%;
}

.introcontainer:after {
  content: "";
  display: table;
  clear: both;
}

.introcolumn a {
  margin: auto 0;
  color: #0091ff;
}
.introcolumn:nth-child(1) a{
  color: #0091ff;
  font-weight: 700;
  font-size: 18px;
}

/* ---------Intro Ends--------- */

/* --------Navbar Starts-------- */
.navbar{
  padding: 0 !important;
}
nav {
  background-color:  var(--main-bg-color);
  width: 100%;
}
 .navbar-brand img {
        height: 80px;
        width:80px;
        background-color:#fff;
        border-radius: 10px;
    }

.navbar-nav{
  display: flex !important;
  justify-content: space-around !important;
}


.nav-item:active {
  color: #000000;
}

/* --------Navbar Ends-------- */
/* Banner Starts */

.banner {
  margin-bottom: 30px;
}

.banner h3 {
  text-align: center;
  margin-top: 20px;
  font-family: 'Roboto', sans-serif;
  color: var(--heading);

}

.banner span {
  font-weight: 700;
}

.banner h4 {
  text-align: center;
  color: #9e9e9e;
  font-weight: 400;
  margin: 10px 0px;
  font-family: 'Roboto', sans-serif;
  word-spacing: 4px;
  /* line-height: 1.5; */
}

.banner span {
  color: #000;
}

/* Banner Ends */

/*------ About us Starts------ */
#about {
  /* background: url(img/blku.jpg); */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}

.about-content p {
  letter-spacing: 1px;
  font-size: 17px;
  word-spacing: 4px;
}

h3 {
  color: #000;
}

/* ------About us Ends-------- */

/* Our Services */
#services {
  margin-top: 20px;
  margin-bottom: 20px;
}

.img-container{
  text-align: center;
}
.img-container img{
  margin-top: 20px;
}
.scontainer {
  text-align: center;
  border: 1px solid #eeeaea;
  border-radius: 0px;

 
}

.service-content {
  margin-top: 30px;
}
.service-content h5{
  text-align: center;
}

.service-content p,
ul {
  margin-top: 15px;
}

.scontainer img {
  width: 100px;
}
.service-content .mb-equal{
  margin-bottom: 90px;
}
/* Our Services */





figure.photo {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  /* min-width: 220px;
  max-width: 310px;
  max-height: 220px; */
  min-width: 300px;
  max-width: 350px;
  max-height: 350px;
  width: 100%;
  background: #000000;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

figure.photo * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

figure.photo img {
  max-width: 100%;
  position: relative;
  opacity: 0.4;
  display: block;
}

figure.photo figcaption {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

figure.photo p {
  position: absolute;
  left: 40px;
  right: 40px;
  display: inline-block;
  background: #000000;
  -webkit-transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
  transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
  padding: 12px 5px;
  margin: 0;
  top: 50%;
  text-transform: uppercase;
  font-weight: 400;
}

figure.photo p span {
  font-weight: 800;
}

figure.photo:before {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  content: '';
  background: #ffffff;
  position: absolute;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: rotate(110deg) translateY(-50%);
  transform: rotate(110deg) translateY(-50%);
}

figure.photo a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}

figure.photo.blue {
  background: #123851;
}

figure.photo.blue p {
  background: #0a212f;
}

figure.photo.red {
  background: #581a14;
}

figure.photo.red p {
  background: #36100c;
}

figure.photo.yellow {
  background: #7f5006;
}

figure.photo.yellow p {
  background: #583804;
}

figure.photo:hover img,
figure.photo.hover img {
  opacity: 1;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

figure.photo:hover p,
figure.photo.hover p {
  -webkit-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
  transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
}

figure.photo:hover:before,
figure.photo.hover:before {
  -webkit-transform: rotate(110deg) translateY(-150%);
  transform: rotate(110deg) translateY(-150%);
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* Our Projects Ends*/

/* Contact Form */

input[type=text],
input[type=number],
input[type=email],
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  font-family: Arial, Helvetica, sans-serif;
}

input[type=submit] {
  background-color:  var(--main-bg-color);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #ff7300;
}

.formcontainer {
  border-radius: 5px;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
  
}
.address{
  padding: 10px;
}
.address h6{
color: #000;
}
.address p{
  /* text-transform: uppercase; */
  font: italic;
}
.address a{
color: #3135ff;
text-decoration: solid;
}

/* Contact Form  ends*/

/* Footer Starts */
#footer {
  background: #154553;
  color: #fff;
  padding-inline: 30px;
}

#footer h3 {
  /* text-decoration: 3px solid underline; */
  color: #fff;
  font-size: 17px;
  /* text-decoration-color: var(--main-bg-color); */
  margin-top: 40px;
}
#footer h2,#footer img{
  margin-top:35px;
}
#footer .p {
  line-height: 1.6;
  letter-spacing: 1px;
  word-spacing:3px;
}
#footer a {
  color: #fff;
  text-decoration: none;

}
#footer a:hover {
  color:var(--nav-text-color);
  text-decoration: none;

}

#footer li {
  list-style: none;
  padding: 2px;
}
#footer span{
  color:  var(--heading);
}

#footer .address h6{
  color: #ffffff;
  margin: 0;
  }
  #footer .address p{
    /* text-transform: uppercase; */
    font: italic;
    margin: 0;
  }
  #footer .address a{
    margin: 0%;
  color: #ffffff;
  text-decoration: solid;
  }
  #footer span{
    color: #F6AE2D;
    font-size: 20px;
  }
  /* .copy h6{
    font-size:small;
  } */
  #footer ul {
    padding: 0;
  }

/* Footer Ends */
figure.photo {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  /* min-width: 300px;
  max-width: 350px;
  max-height: 350px; */
  width: 100%;
  background: #000000;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
#footer img{
  display: block;
}
.footer-logo{
  height: 80px;
  border-radius: 5px;
}
  
.navbar-toggler {
color: #fff !important;
padding:4px;
outline-width: 2px;
} 

/* styles.css */
.scroll-to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  border-radius:7px;
  width: 40px;
  height: 40px;
  background-color: #276ef3;
  color: rgb(255, 255, 255);
  font-size: 24px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}



/* gallery style starts */
body{
	margin:0;
	padding:0;
}
/* .container{
	width:90%
	margin:10px auto;
} */
.portfolio-menu{
	text-align:center;
}
.portfolio-menu ul li{
	display:inline-block;
	margin:0;
	list-style:none;
	padding:10px 15px;
	cursor:pointer;
	-webkit-transition:all 05s ease;
	-moz-transition:all 05s ease;
	-ms-transition:all 05s ease;
	-o-transition:all 05s ease;
	transition:all .5s ease;
}


.portfolio-item .item{
	/*width:303px;*/
	float:left;
	margin-bottom:10px;
}

/* gallery style ends */


/*-------------- Media Query Styles Starting From Here ------------------ */

/* ---------Intro starts---------- */
@media only screen and (max-width:982px) {

  /* .navbar-brand img {
      height: 80px;
  } */
  .introcolumn:nth-child(1),
  .introcolumn:nth-child(2) {
      width: 25%;
  }

  .introcolumn:nth-child(3) {
      width: 50%;
  }

  .introcolumn {
      display: none;
  }
}

@media only screen and (min-width:790px) {
  .nav-item .nav-link {
      color: #fff;
      padding: 0px 0px 0px 20px !important;

  }

}

/* ---------Intro Ends--------- */
@media only screen and (max-width:768px) {
  /* Banner Starts */

  .banner {
      margin-bottom: 20px;
  }

  .banner h3 {
      text-align: center;
      margin-top: 10px;
      font-family: 'Roboto', sans-serif;
  
  }

  .banner span {
      font-weight: 600;
  }

  .banner h4 {
      text-align: center;
      color: #9e9e9e;
      font-weight: 400;
      margin: 8px 0px;
      font-size: 16px;
      font-family: 'Roboto', sans-serif;
  }

  /* Banner Ends */

  /*------ About us Starts------ */
  .about-content p {
      letter-spacing: 1px;
      font-size: 15px;
      word-spacing: 3px;
  }

  h3 {
      color: #000;
  }

  /* ------About us Ends-------- */

  /* Our Services */
  #services {
      margin-top: 10px;
      padding: 10px;
      /* margin-bottom: 20px; */
  }

  .img-container {
      text-align: center;
  }

  .img-container img {
      margin-top: 20px;
  }

  .scontainer {
      text-align: center;
      border: 1px solid #eeeaea;
      border-radius: 0px;
  }

  .service-content {
      margin-top: 20px;
  }

  .service-content h5 {
      text-align: center;
  }

  .service-content p,
  ul {
      margin-top: 10px;
  }

  .scontainer img {
      width: 100px;
  }

  .service-content .mb-equal {
      margin-bottom: 50px;
  }

  /* Our Services ends*/
  /* Footer Starts */
  #footer {
      background: #000;
      color: #fff;
      padding-inline: 30px;
  }

  #footer h3 {
      text-decoration: 3px solid underline;
      color: #fff;
      font-size: 14px;
      text-decoration-color: var(--main-text-color);
      margin-top: 10px;
  }

  #footer h2,
  #footer img {
      margin-top: 20px;
  }

  #footer img {
      display: flex;
  }

  #footer .p {
      letter-spacing: 1px;
      word-spacing: 2px;
  }

  .copy h6 {
      font-size: small;
  }

  .copy h6 a span {
      font-size: small;
  }

  /* Footer Ends */
  .nav-item .nav-link {
      color: #fff;
      padding: 8px 4px !important;

  }

}

@media only screen and (max-width:447px) {
  /* .navbar-brand img {
      height: 40px;
  } */

  .navbar-brand span {
      color: yellow;
      font-size: 20px;
      font-weight: 800;
  }

  figure.photo {
      font-family: 'Raleway', Arial, sans-serif;
      position: relative;
      overflow: hidden;
      margin: 10px;
      /* min-width: 220px;
      max-width: 310px;
      max-height: 220px; */
      min-width: 300px;
      max-width: 350px;
      max-height: 350px;
      width: 100%;
      background: #000000;
      color: #ffffff;
      text-align: center;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  }
}

@media only screen and (max-width:382px) {
  /* .navbar-brand img {
      height: 40px;
  } */

  .navbar-brand span {
      display: none;
  }
}