/* Base CSS */
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;500;600;700&display=swap');


.alignleft {
    float: left;
    margin-right: 15px;
}
.alignright {
    float: right;
    margin-left: 15px;
}
.aligncenter {
    display: block;
    margin: 0 auto 15px;
}
a:focus, input:focus, textarea:focus, button:focus { outline: 0 solid }
a:hover { text-decoration: none }
img {
    max-width: 100%;
    height: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    font-weight: 700;
    font-family: 'Karla', sans-serif;
}
body {
    font-family: 'Open Sans', sans-serif;
    color: #000;
    line-height: 1.7;
    font-weight: 400;
    font-size: 16px;
}


.header-area {
    text-align: center;
    padding: 30px 0px 10px 0px;
    border-bottom: 1px solid #ddd;
}

#sticky-wrapper {
    position: relative;
    z-index: 999;
}

.is-sticky .header-area {
    background-color: #fff;
}

.menin-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menin-menu li {
    display: inline-block;
}

.menin-menu li a {
    color: #2A2A2A;
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    padding: 20px 10px;
    transition: .3s;
}

.menin-menu li a:hover {
    color: #0C71C3;
}

.logo a img {
    width: 80%;
}
.mobile-menu {
    display: none;
}
.desktop-menu {
    display: block;
}

#mobile {
    display: none;
}
.slider-area {
    padding: 30px;
}

.carousel-area .single-slider {
    /*height: 700px;*/
}

.carousel-area .owl-nav button {
    position: absolute;
    left: 50px;
    top: 50%;
}

.carousel-area .owl-nav button svg {
    font-size: 50px;
    color: #fff;
    opacity: .7;
    transition: .3s;
}

.carousel-area .owl-nav button.owl-next {
    left: auto;
    right: 50px;
}

.carousel-area .owl-nav button svg:hover {
    opacity: 1;
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%;
    /*height: 100%;*/
}

html{scroll-behavior:smooth}

a.ankor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

.building-system-area {
    width:80%;
    margin: 0 auto;
    padding-top:50px;
}

.building-system-inner-area {
    background-color: #F2F2F2;
    text-align: center;
    padding: 250px 0px;
}

.building-system-area h1 {
    font-size: 60px;
    color: #6F6F6F;
    line-height: 70px;
}


.video-area {
    padding: 80px 0px;
}


.experts-area {
    padding: 30px 0px 100px 0px;
}

.experts-area h2 {
    text-align: center;
    font-size: 40px;
    color: #1d2124;
    margin-bottom: 50px;
}

.extert-left-area {
    position: relative;
}

.expert-text-area {
    width: 50%;
    text-align: right;
    padding-right: 15px;
    float: left;
}

.expert-img-area {
    width: 50%;
    float: right;
}

.expert-text-area p {
    font-size: 14px;
    color: #333;   
    padding: 10px 0px 0px 0px;
}

.expert-text-area h2 {
    font-size: 18px;
    text-align: right;
    color: #333;
    font-weight: 700;
    margin-bottom: 0px;
}

.expert-text-area span {
    font-size: 13px;
    color: #3C1E79;
}


.expert-img-area img {
    border-radius: 10px;
}

.expert-single-slider img {
    border-radius: 10px;
}

.extert-right-area .owl-nav button {
    position: absolute;
    left: 40%;
    bottom: -70px;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    border: 2px solid #41237C !important;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 10%;
    transition: .3s;
}

.extert-right-area .owl-nav button svg {
    font-size: 20px;
    color: #41237C;
    line-height: 40px !importnat;
    padding: 8px 12px;
    transition: .3s;
}

.extert-right-area .owl-nav button svg:hover, .extert-right-area .owl-nav button:hover {
    color: #fff;
    background-color: #41237C
}

.extert-right-area .owl-nav button.owl-next {
    left: auto;
    right: 40%;
}

.form-area {
    background-color: #DBDBD9;
    padding: 80px 0px;
}

.form-area h2 {
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    color: #333;
    line-height: 48px;
    margin-bottom: 50px;
    padding: 0;
}

.form-area-top input {
    width: 100%;
    background-color: #EEEEEE;
    border: none;
    padding: 15px 20px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #333;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #919191;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #919191;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #919191;
}
:-moz-placeholder { /* Firefox 18- */
  color: #919191;
}


::placeholder {
    color: #919191;
}

button.default-btn {
    display: inline-block;
    width: auto;
    float: right;
    padding: 12px 28px;
    background-color: transparent;
    border: 2px solid #186AC0;
    color: #186AC0;
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    border-radius: 5px;
    transition: .3s;
    cursor: pointer;
}
button.default-btn:hover {
    background-color: #EEEEEE;
}

.form-area-bottom .logo a img {
    width: 200px;
}

.form-area-bottom {
    text-align: center;
}

.form-area-bottom .logo {
    margin: 20px 0px 50px 0px;
}

.team-info img {
    width: 300px;
}

.team-info p {
    color: #333;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    margin: 25px 0px 40px 0px;
}

.form-bottom-content p {
    font-size: 20px;
    line-height: 30px;
    color: #333;
}

.form-bottom-content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.form-bottom-content li {
    display: inline-block;
    position: relative;
    font-size: 20px;
    line-height: 30px;
    color: #333;
    padding: 0px 14px;
}

.form-bottom-content li a {
    font-size: 20px;
    line-height: 30px;
    color: #0C71C3;
}

.form-bottom-content li:after {
    position: absolute;
    right: -2px;
    top: 6px;
    width: 2px;
    height: 20px;
    background-color: #575757;
    content: "";
}

.form-bottom-content li:last-child:after {
    display: none;
}



.footer-top-area {
    padding: 70px 0px;
}

.footer-top-area .logo a img {
    width: 70%;
}

.footer-top-mid-content {
    text-align: center;
}

.footer-top-right-content {
    text-align: right;
}

.footer-top-right-content a {
    color: #0C71C3;
    transition: .3s;
}

.footer-top-right-content a:hover {
    opacity: .7;
}

.footer-top-mid-content h2 {
    font-size: 24px;
    color: #000;
    text-transform: uppercase;
    line-height: 34px;
    margin-bottom: 20px;
}

.footer-top-mid-content p {
    font-size: 15px;
    color: #000;
    line-height: 25px;
    margin-bottom: 20px;
}

a.btn {
   text-align: center;
  font-size: 16px;
  text-decoration: none;
  color:#000;
  background-color: #fff;
  border-color: #5a7a8f;
  border-radius: 5px;
  padding: 10px;
}

a.btn:hover {
  color: #fff;
  background-color: #5a7a8f;
}



.footer-area {
    background-color: #181818;
    padding: 20px 0px;
    margin: 0;
}

.footer-left-area ul, .footer-social-area ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-left-area li, .footer-social-area li {
    display: inline-block;
    position: relative;
    color: #666666;
    font-size: 14px;
    font-weight: 500;
    padding: 0px 10px;
}

.footer-left-area li:after {
    position: absolute;
    right: -1px;
    top: 5px;
    width: 1px;
    height: 15px;
    background-color: #666666;
    content: "";
}

.footer-left-area li:last-child:after {
    display: none;
}


.footer-social-area {
    text-align: right;
}

.footer-social-area li a {
    color: #666;
    font-size: 16px;
    transition: .3s;
}

.footer-social-area li a:hover {
    color: #0C71C3;
}