/*********************************************************************



File Name       : styles.css

Project Name    : Montro - Architecture HTML5 Template

Author          : Himalayanthemes

Profile         : https://themeforest.net/user/himalayanthemes/portfolio



***********************************************************************/



/***********************************************************************

    CSS Index

************************************************************************

    01.Import

    02.Common-styles

    03.Animations

    04.Preloader

    05.Header

    06.Slider

    07.Media-objects

    08.Service-area

    09.News-area

    10.Gallery-area

    11.Facts & Clients-area

    12.Breadcrumb-area

    13.About-Page

    14.Project-Page

    15.Contact-page

    16.Footer

    17.Back-to-Top



***********************************************************************/

/***********************************************************************

    01.Import

************************************************************************/

    @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700');

    @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700');



/***********************************************************************

    02.Common-styles

************************************************************************/
html {
  scroll-behavior: smooth;
}

body {

    font-family: 'Source sans pro',sans-serif;

    font-weight: 300;

    color: #7d7d7d;

}

a {

    color:#0b2464;

}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {

    background-color: #0b2464 !important;

}

.nav-pills .nav-link {

    border-radius: 0rem;

    font-weight: 500;

}

.livechat>a.nav-link {

    background: #0b2464;

}

h1,h2,h3,h4,h5,h6 {

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

    font-weight: 700;

    color: #0b2464;

    letter-spacing: 1px;    

}

.bdr {

    border: 1px solid red;

}

.mat-30 {

    margin-top: 30px;

}

.mat-40 {

    margin-top: 40px;

}

.mat-50 {

    margin-top: 50px;

}

.mab-30 {

    margin-bottom: 30px;

}

.mab-50 {

    margin-bottom: 50px;

}

.mab-70 {

    margin-bottom: 70px;

}

.mab-100 {

    margin-bottom: 100px;

}

.secpad {

    padding: 100px 0 70px 0;

}

hr {

    margin-top: 0;

    margin-bottom: 0;

}

.lato {

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

    font-weight: 400;

    font-size: 18px;

    color: #0b2464;

}

.hr-8 {

    margin-top: 80px;

    margin-bottom: 80px;

}

.btn-primary {

    background: transparent;

    border: 2px solid #fff;

    padding: 15px 30px;

    text-transform: uppercase;

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

    border-radius: 0px;

    transition: .2s all;

    font-size: 13px;

    font-weight: 600;

    color: #fff;

}

.btn-primary:hover,

.btn-primary:focus {

    background: #0b2464;

    border: 2px solid #0b2464;

}

.btn-primary1 {

    background: transparent;

    border: 2px solid #0b2464;

    padding: 15px 30px;

    text-transform: uppercase;

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

    border-radius: 0px;

    transition: .2s all;

    font-size: 13px;

    font-weight: 600;

    color: #0b2464;

}

.btn-primary1:hover,

.btn-primary1:focus {

    background: #0b2464;

    border: 2px solid #0b2464;

    color: #fff;

    outline: none;

}

.btn-primary2 {

    background: transparent;

    border: 2px solid #fff;

    padding: 15px 30px;

    text-transform: uppercase;

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

    border-radius: 0px;

    transition: .2s all;

    font-size: 13px;

    font-weight: 600;

    color: #fff !important;

}

.btn-primary2:hover,

.btn-primary2:focus {

    background: #fff;

    border: 2px solid #fff;

    color: #0b2464 !important;

    outline: none;

}

.btn-primary-dl {

    background: #4CAF50;

    border: 2px solid #CDDC39;

    padding: 15px 30px;

    text-transform: uppercase;

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

    border-radius: 0px;

    transition: .2s all;

    font-size: 16px;

    font-weight: 600;

    color: #fff !important;

}



.btn-primary-dl:hover {

    background: #388E3C;

}



.btn-primary-b {

    background: #FF9800;

    border: 2px solid #FFC107;

    padding: 15px 30px;

    margin-left: 20px;

    text-transform: uppercase;

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

    border-radius: 0px;

    transition: .2s all;

    font-size: 16px;

    font-weight: 600;

    color: #fff !important;

    scroll-behavior: smooth;

}

.btn-primary-b:hover,

.btn-primary-b:focus {

    background: #FF5722;

    border: 2px solid #FFC107;

    color: ##FF0000 !important;

    outline: none;

}

.thin-text {

    font-weight: 300;

}

.section-title .line, .section-title .line1, .contact-box-title .line1 {

    width: 100px;

    height: 3px;

    border-radius: 7px;

    background-color: #0b2464;

    margin: auto;

}

.section-title .line1, .contact-box-title .line1 {

    margin: 0 !important;

}

.section-title .line2 {

    width: 100px;

    height: 3px;

    border-radius: 7px;

    background-color: #fff;

    margin: auto;   

}

.bg-light {

    background-color: #f7f7f7 !important;

}

.mark {

    background-color: #0b2464;

    color: #fff;

}

.rounded-circle {

    width: 60px;

}



/************ Animations ************/

.anim-2s {

  animation-delay: .4s;

}

.anim-4s {

  animation-delay: .6s;

}

.anim-6s {

  animation-delay: .8s;

}





/************ Preloader ************/

#preloader {

  position: fixed;

  top:0;

  left:0;

  right:0;

  bottom:0;

  background: rgba(181,85,255,1);

    background: -moz-linear-gradient(left, rgba(181,85,255,1) 0%, rgba(126,90,255,1) 100%);

    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(181,85,255,1)), color-stop(100%, rgba(126,90,255,1)));

    background: -webkit-linear-gradient(left, rgba(181,85,255,1) 0%, rgba(126,90,255,1) 100%);

    background: -o-linear-gradient(left, rgba(181,85,255,1) 0%, rgba(126,90,255,1) 100%);

    background: -ms-linear-gradient(left, rgba(181,85,255,1) 0%, rgba(126,90,255,1) 100%);

    background: linear-gradient(to right, rgba(181,85,255,1) 0%, rgba(126,90,255,1) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b555ff', endColorstr='#0b2464', GradientType=1 );

  z-index:9999; /* makes sure it stays on top */

}

.spinner {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 60px;

    height: 60px;

    margin-top: -20px;

    margin-left: -20px;

    background-color: #fff;



    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;

    animation: sk-rotateplane 1.2s infinite ease-in-out;

}

@-webkit-keyframes sk-rotateplane {

    0% { -webkit-transform: perspective(120px) }

    50% { -webkit-transform: perspective(120px) rotateY(180deg) }

    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }

}



@keyframes sk-rotateplane {

  0% { 

    transform: perspective(120px) rotateX(0deg) rotateY(0deg);

    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 

  } 50% { 

    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 

  } 100% { 

    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

  }

}





/***********************************************************************

    03.Header

************************************************************************/

header   {

    position: absolute;

    width: 100%;

    top: 0;

    left: 0;

    z-index: 100;

}

.navbar-brand {

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

    font-weight: 700;

    color: #fff !important;

    font-size: 25px;

}

.navbar {

    background: transparent;

}

.navbar-light .navbar-nav .nav-link {

    position: relative;

    color: #fff;

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

    font-weight: 700;

    text-transform: uppercase;

    font-size: 13px;

    transition: .2s all;

    border: 2px solid transparent;

    margin-right: 10px;

    padding-left: 15px;

    padding-right: 15px;

}

.navbar-light .navbar-nav .nav-link:hover,

.navbar-light .navbar-nav .nav-link:focus {

    border: 2px solid #fff;

    color: #fff;

}

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

    color: #fff;

    transition: .2s all;

    font-weight: 700;

    border: 2px solid #fff;

    padding-left: 15px !important;

    padding-right: 15px !important;

}

.navbar-light .navbar-nav .social .nav-link {

    border: 1px solid #fff;

    width: 35px;

    height: 35px;

    text-align: center;

    border-radius: 50px;

    transition: .2s all;

    color: #fff;

    font-size: 12px;

    line-height: 35px !important;

    padding: 0 !important;

}

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

    background-color: #0b2464;

    border-color: #0b2464;

}

.navbar-light .navbar-nav .social .nav-link:before {

    display: none;

}





/***********************************************************************

    04.Slider

************************************************************************/

.carousel-caption {

    bottom: 150px;

}

.carousel-caption h1 {

    font-size: 65px;

    letter-spacing: 5px;

}

.carousel-caption h5 {

    font-weight: 300;

    font-size: 15px;

    letter-spacing: 2px;

}





/***********************************************************************

    05.Media-objects

************************************************************************/

.intro-area span {

    border: 2px solid #0b2464;

    padding: 15px;

    border-radius: 40px;

}

.overview-area .gap {

    margin-bottom: 70px;

}





/***********************************************************************

    06.Service-area

************************************************************************/

.service-box {

    padding: 25px;

    border: 2px solid transparent;

    transition: .2s all;

    -webkit-box-shadow: 0px 5px 55px -3px rgba(0,0,0,0.15);

    -moz-box-shadow: 0px 5px 55px -3px rgba(0,0,0,0.15);

    box-shadow: 0px 5px 55px -3px rgba(0,0,0,0.15);

}

.service-box img {

    width: 75px;

}

.service-box:hover {

    border: 2px solid #0b2464;

    -webkit-box-shadow: 1px 1px 50px 2px rgba(126,90,255,0.25);

    -moz-box-shadow: 1px 1px 50px 2px rgba(126,90,255,0.25);

    box-shadow: 1px 1px 50px 2px rgba(126,90,255,0.25);

    cursor: pointer;

}

.service-box i {

    font-size: 50px;

}

.service-box .line {

    width: 30px;

    height: 2px;

    background-color: #3c4858;

    margin: auto;

    opacity: .6;

}



/***********************************************************************

    06.News-area

************************************************************************/

.news-area {

    background: url('../img/bg-1.jpg');

    background-attachment: fixed;

}

.news-area1 {

    background: none;

}

.news-area .card {

    border: 0;

}

.news-area .card-img-top, .news-area .card-body {

    border-radius: 0;

}

.news-area #owl-demo .item {

    padding: 0 15px;

}

.news-area #owl-demo .item small {

    color: #0b2464;

}

.news-area #owl-demo .item h6 {

    font-size: 14px;

}

.news-area .media {

    margin-bottom: 20px;

}

.news-area .media-body {

    padding-top: 20px;

}

.news-area .owl-buttons div {

  width: 40px;

  height: 40px;

  position: absolute;

  top: 45%;

  text-align: center;

  line-height: 35px;

  display: inline-block;

  background: transparent;

  border: 2px solid #fff;

  color: #fff;

  font-size: 20px;

  transition: .2s all;

}

.news-area .owl-buttons div:hover {

    background-color: #fff;

    color: #3c4858;

    border-color: #fff;

}

.news-area .owl-buttons .owl-next {

  right: -50px;

  transition: .2s all;

}

.news-area .owl-buttons .owl-prev {

  left: -50px;

  transition: .2s all;

}

.news-area a {

    color: #3c4858;

}

.news-single-area .media-body a {

    font-size: 14px;

    color: #3c4858;

}

.border-bottom {

    border-bottom: 1px solid #eee !important;

}

.news-single-area .thin-text {

    line-height: 36px;

}

.news-single-area li a {

    color: #bbb;

    transition: .2s all;

}

.news-single-area li a:hover {

    color: #0b2464;

}

.news-single-area input, .news-single-area textarea {

    border-radius: 0px;

    border-color: #ddd;

}

.news-single-area input {

    height: 45px;

    margin-bottom: 25px;

}

.news-single-area ::placeholder {

    color: #bbb;

    font-family: 'Montserrat';

    font-size: 12px;

}

.news-single img {

    width: 65px;

}





/***********************************************************************

    07.Gallery-area

************************************************************************/

.gallery-area .hover {

    position: relative;

    transition: .2s all;

}

.gallery-area .hover a {

    transition: .2s all;

}

.gallery-area i {

    background-color: transparent;

    border: 2px solid #fff;

    color: #fff;

    width: 45px;

    height: 45px;

    line-height: 40px;

    text-align: center;

    font-size: 16px;

    position: absolute;

    top: 50%;

    left: 50%;

    margin-left: -25px;

    margin-top: -15px;

    transition: .2s all;

    visibility: hidden;

}

.gallery-area i:hover {

    background-color: #0b2464;

    border-color: #0b2464;

}

.gallery-area .hover:hover i {

    visibility: visible;

    margin-top: -25px;

}





/***********************************************************************

    08.Facts & Clients-area

************************************************************************/

.fact-area h6 {

    font-size: 15px;

    font-weight: 400;

}



/*Clients*/

.clients-area .owl-buttons {

    text-align: center;

    margin-top: 50px;

}

.clients-area .owl-buttons div {

  width: 40px;

  height: 40px;

  /*position: absolute;*/

  /*top: 45%;*/

  text-align: center;

  line-height: 35px;

  display: inline-block;

  background: transparent;

  border: 2px solid #0b2464;

  color: #0b2464;

  font-size: 20px;

  transition: .2s all;

}

.clients-area .owl-buttons div:hover {

    background-color: #0b2464;

    color: #fff;

    border-color: #0b2464;

}

.clients-area .owl-buttons .owl-next {

  margin-left: 20px;

  transition: .2s all;

}

.testimonial-area .media-body h6 {

    color: #0b2464;

}

.testimonial-area .owl-controls {

  text-align: center;

}

.testimonial-area .owl-controls .owl-page {

  display: inline-block;

}

.testimonial-area .owl-pagination {

  padding: 0;

  margin: 0;

}

.testimonial-area .owl-controls .owl-page span {

  background-color: transparent;

  -webkit-border-radius: 30px;

  -moz-border-radius: 30px;

  border-radius: 30px;

  display: block;

  width: 12px;

  height: 12px;

  border: 2px solid #909090;

  margin: 5px 7px;

  filter: Alpha(Opacity=500);/*IE7 fix*/

  opacity: 0.5;

  transition: .2s all;

}

.testimonial-area .owl-controls .owl-page.active span, 

.testimonial-area .owl-controls .owl-page:hover span {

  background-color: #909090;

  filter: Alpha(Opacity=100);

  opacity: 1;

}





#map {

    height: 500px;

}



/***********************************************************************

    09.Breadcrumb-area

************************************************************************/

.breadcrumb-area {

    background: url(../img/bg.png);

    background-size: cover;

    padding: 150px 0 100px;

}

.breadcrumb-area h1 {

    font-size: 40px;

}

.breadcrumb-area h6 {

    font-weight: 500;

    font-size: 14px;

    letter-spacing: 2px;

    color: #fff;

}



.ul-header {

 list-style-type: ordered;

 list-style-position: 200;

 font-weight: thin;

 color: Black;

 font-size: 18px;

 text-align: left;

}









/***********************************************************************

    10.About-Page

************************************************************************/

.about-page .icon {

    width: 50px;

}

.partner-footer {

    padding: 20px;

    background-color: #fff;

}

.partner-footer .post {

    color: #0b2464;

    font-weight: 400;

}

.value-area img {

    width: 45px;

}



/***********************************************************************

    10.Project-Page

************************************************************************/

.years-area ul li {

    display: inline-block;

}

.years-area li a {

    padding: 15px 25px;

    border: 1px solid #ddd;

    margin-right: 20px;

}

.years-area li:last-child a {

    margin-right: 0px;  

}

.stories-area .linehi {

    line-height: 60px;

}

.tab-area .nav a {

    font-weight: bold;

    color: #3c4858;

    font-size: 13px;

    text-transform: uppercase;

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

    transition: .2s all;

}

.tab-area .nav a:hover,

.tab-area .nav a:focus,

.tab-area .nav a.active {

    color: #0b2464;

}

.years-area .years-box li a {

    border-color: #ddd;

    transition: .3s all;

    text-decoration: none;

    font-family: 'Montserrat';

    font-size: 14px;

    font-weight: 600;

    color: #3c4858;

}

.years-area .years-box li a:hover,

.years-area .years-box li a:focus {

    color: #fff;

    background: rgba(181,85,255,1);

    background: -moz-linear-gradient(left, rgba(181,85,255,1) 0%, rgba(126,90,255,1) 100%);

    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(181,85,255,1)), color-stop(100%, rgba(126,90,255,1)));

    background: -webkit-linear-gradient(left, rgba(181,85,255,1) 0%, rgba(126,90,255,1) 100%);

    background: -o-linear-gradient(left, rgba(181,85,255,1) 0%, rgba(126,90,255,1) 100%);

    background: -ms-linear-gradient(left, rgba(181,85,255,1) 0%, rgba(126,90,255,1) 100%);

    background: linear-gradient(to right, rgba(181,85,255,1) 0%, rgba(126,90,255,1) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b555ff', endColorstr='#0b2464', GradientType=1 );

}

.single-project-area .owl-buttons {

    text-align: right;

    margin-top: 50px;

    margin-right: 10%;

}

.single-project-area .owl-buttons div {

    width: 50px;

    height: 50px;

    position: absolute;

    /*top: 45%;*/

    text-align: center;

    line-height: 45px;

    display: inline-block;

    background: transparent;

    border: 2px solid #3c4858;

    color: #3c4858;

    font-size: 20px;

    transition: .2s all;

}

.single-project-area .owl-buttons div:hover {

    background-color: #0b2464;

    color: #fff;

    border-color: #0b2464;

}

.single-project-area .owl-buttons .owl-next {

    margin-left: 60px;

    transition: .2s all;

}

.project-overview-area img {

    width: 60px;

}







/***********************************************************************

    10.Contact-page

************************************************************************/

.drop-area .nav {

    border: 0;

}

.drop-area .nav-tabs .nav-link {

    border: 0;

    border-radius: 0;

}

.drop-area .nav-item a {

    font-family: 'Montserrat';

    font-size: 13px;

    font-weight: 700;

    color: #3c4858;

}

.contact-area input, .contact-area textarea {

    border-radius: 0;

    font-family: 'Montserrat';

    color: #ddd;

    font-size: 12px;

}

.contact-area input {

    height: 45px;

}

.contact-area label {

    font-family: 'Montserrat';

    color: #303030;

    font-size: 13px;

    font-weight: 500;

    text-transform: uppercase;

}

.contact-area ::placeholder {

    color: #ccc;

}







/***********************************************************************

    10.Footer

************************************************************************/

footer {

    padding: 80px 0;

    background: url('../img/bg1.png');

    background-size: cover;

}

.contact-box {

    margin-top: -200px;

}

.contact-box li {

    margin-bottom: 10px;

}

.contact-box li a {

    color: #3c4858;

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

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    transition: .2s all;

}

.contact-box li:first-child a {

    color: #0b2464;

}

.contact-box li a:hover {

    color: #0b2464;

}

.contact-box p {

    color: #3c4858;

    font-weight: 600;

    font-size: 14px;

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

}

footer .shortlinks li, .footer-social li {

    display: inline-block;

}

footer .shortlinks li a {

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

    font-weight: 700;

    padding: 0 15px;

    font-size: 13px;

    color: #fff;

    text-decoration: none;

    transition: .2s all;

}

footer .shortlinks li a:hover {

    color: #fff;

}

.footer-social li {

    border: 1px solid #fff;

    width: 35px !important;

    height: 35px;

    line-height: 33px;

    text-align: center;

    border-radius: 50px;

    transition: .2s all;

    font-size: 12px;

    margin-right: 15px;

    transition: .2s all;

}

.footer-social li:hover {

    background-color: #0b2464;

    border-color: #0b2464;

    cursor: pointer;

}

.footer-social li a {

    color: #fff;

    transition: .2s all;

}

footer .copyrights {

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

    font-size: 13px;

    font-weight: 300;

    color: #fff;

}

footer .copyrights a {

    color: #fff;

}





/************** Back-to-Top *****************/

.back-to-top {

  cursor:pointer;

  width: 50px;

  height: 50px;

  line-height: 50px;

  text-align: center;

  border-radius: 50px;

  background: rgba(181,85,255,1);

    background: -moz-linear-gradient(left, rgba(181,85,255,1) 0%, rgba(126,90,255,1) 100%);

    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(181,85,255,1)), color-stop(100%, rgba(126,90,255,1)));

    background: -webkit-linear-gradient(left, rgba(181,85,255,1) 0%, rgba(126,90,255,1) 100%);

    background: -o-linear-gradient(left, rgba(181,85,255,1) 0%, rgba(126,90,255,1) 100%);

    background: -ms-linear-gradient(left, rgba(181,85,255,1) 0%, rgba(126,90,255,1) 100%);

    background: linear-gradient(to right, rgba(181,85,255,1) 0%, rgba(126,90,255,1) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b555ff', endColorstr='#0b2464', GradientType=1 );

  display: none;

  position: fixed;

  z-index: 9999;

  bottom: 20px;

  right: 30px;

  transition: .3s all;  

}

.back-to-top .fa {

  color: #fff;

  line-height: 48px;

}

.back-to-top:hover {

    -webkit-box-shadow: 1px 1px 35px -2px rgba(176,163,119,0.48);

    -moz-box-shadow: 1px 1px 35px -2px rgba(176,163,119,0.48);

    box-shadow: 1px 1px 35px -2px rgba(176,163,119,0.48);

    transition: .3s all;

}

.red {
    color: red;
    font-weight: 600;
    font-size: 30px;
}

table, th, td, tr {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 15px;
  text-align: center;
  
}


/*.breadcrumb-new {

    background: url(../img/bg-5.jpg);

    background-size: cover;

    padding: 100px 0 150px;

}*/

/*

    Grey    - #3c4858;

    violet  - #0b2464;

    blue    - #0b2464;

*/