/*
@File: Conzio Template Styles

* This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
template.

This files table contents are outlined below>>>>>

*******************************************
** - DEFAULT AREA STYLE - **

** - Default Btn Area Style
** - Read More Area Style
** - Section Title Area Style

** - HOME PAGE STYLE - **

** - Top Header Area Style
** - Nav Area Style
** - Mobile Nav Area Style
** - Hero Slider Area Style
** - Who We Are Content Area Style
** - Feathers Area Style
** - Service Area Style
** - Counter Area Style
** - Featured Area Style
** - Price Area Style
** - Skill Area Style
** - Partner Area Style
** - Testimonials Area Style
** - Blog Area Style
** - Subscribe Area Style
** - Footer Top Area Style
** - Footer Bottom Area Style
** - Sidebar Area Style

** - OTHER STYLE AREA - **

** - Preloader Area Style
** - Go Top Style
** - Video wave Style
** - Section Title Area Style
** - Nice select Area

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

/*
Default Style
============================*/
@import url('https://fonts.cdnfonts.com/css/helvetica-neue-5?styles=103510,103508,103502');
@import url(./partials/header.css);
@import url(./partials/footer.css);
@import url(./partials/menu.css);
@import url(./pages/home.css);
@import url(./pages/photo.css);
@import url(./pages/contact.css);
@import url(./pages/archive.css);
@import url(./pages/projects.css);
@import url(./pages/documents.css);

:root {
  --body-family: 'Helvetica Neue', sans-serif;
  --main-color: #00A3C9;
  --body-color: #FCFCFF;
  --white-color: #ffffff;
  --black-color: #000000;
  --nav-bg-color: #fff;
  --nav-a-color: rgba(42, 49, 74, 0.50);
  --section-color: #2A314A;
  --font-size: 16px;
  --transition: all .5s ease-in-out;
  --border-radius: 5px;
  --box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
  --card-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), -3px 13px 29px 0px rgba(0, 0, 0, 0.10), -12px 52px 54px 0px rgba(0, 0, 0, 0.09), -27px 118px 72px 0px rgba(0, 0, 0, 0.05), -48px 209px 86px 0px rgba(0, 0, 0, 0.01), -75px 327px 94px 0px rgba(0, 0, 0, 0.00);
}

.pagination .page-link {
    color: var(--main-color) !important;
}

.pagination .active span {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    color: #fff !important;
}

body {
  font-family: var(--body-family);
  background-color: var(--body-color);
  overflow-x: hidden;
}

.row {
  margin: 0;
}

a {
  display: inline-block;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  text-decoration: none;
  color: var(--white-color);
}

a:hover {
  text-decoration: none;
  color: var(--main-color);
}

a:focus {
  text-decoration: none;
}

button {
  outline: 0 !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
}

button:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-family);
  color: var(--main-color);
  font-weight: 700;
}

h3 {
  font-size: 24px;
}

.d-table {
  width: 100%;
  height: 100%;
}

.d-table-cell {
  vertical-align: middle;
}

p {
  font-size: var(--font-size);
  margin-bottom: 15px;
  line-height: 1.8;
}

p:last-child {
  margin-bottom: 0;
}

img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

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

.form-control {
  height: 50px;
  color: var(--main-color);
  border: 1px solid #ebebeb;
  background-color: #f7f7f7;
  border-radius: 0;
  font-size: 16px;
  padding: 10px 20px;
  width: 100%;
}

.form-control::-webkit-input-placeholder {
  color: var(--main-color);
}

.form-control:-ms-input-placeholder {
  color: var(--main-color);
}

.form-control::-ms-input-placeholder {
  color: var(--main-color);
}

.form-control::placeholder {
  color: gray;
}

.form-control:focus {
  color: var(--black-color);
  background-color: transparent;
  -webkit-box-shadow: unset;
  box-shadow: unset;
  outline: 0;
  border: 1px solid var(--main-color);
}

.form-control:hover:focus,
.form-control:focus {
  -webkit-box-shadow: unset;
  box-shadow: unset;
}

textarea.form-control {
  height: auto;
}

.ptb-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.ptb-70 {
  padding-top: 70px;
  padding-bottom: 70px;
}

.pt-100 {
  padding-top: 100px;
}

.pb-100 {
  padding-bottom: 100px;
}

.pt-70 {
  padding-top: 70px;
}

.pb-70 {
  padding-bottom: 70px;
}

.mt-100 {
  margin-top: 100px;
}

.mt-30 {
  margin-top: 30px;
}

.mb-30 {
  margin-bottom: 30px;
}

/*
Bg-color Style*/
.ebeef5-bg-color {
  background-color: #ebeef5;
}

.f5f6fa-bg-color {
  background-color: #f5f6fa;
}

/*
Default Btn Area Style*/

.navbar-toggler {
  border: none;
  margin: 0 auto;
}

.navbar-toggler:focus {
  box-shadow: none;
  border: 0;
}

/*
Read More Btn Area Style*/
.read-more {
  margin-top: 70px;
  background:
    linear-gradient(90deg, #fff 50%, #00A3C9 0) var(--_p, 100%)/200% no-repeat;
  width: 200px;
  padding: 18px;
  text-align: center;
  border-radius: var(--border-radius);
  border: 1px solid var(--main-color);
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.read-more a {
  font-family: var(--body-family);
  font-weight: 500;
  font-size: 18px;
  color: var(--white-color);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.read-more:hover {
  --_p: 0%;
}

.read-more:hover a {
  color: var(--main-color);
}


@media screen and (max-width: 991px) {
  .read-more {
    margin: 0 auto;
  }
}

/*====================================================
Progress bar and Scroll Bar
======================================================*/
.bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: transparent;
  z-index: 9999;
  transition: var(--transition);
}

.bar--progress {
  position: absolute;
  width: 0%;
  height: 5px;
  background: var(--main-color);
  transition: 0.25s ease-in-out;
}

/* Scrollbar */

/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--main-color);

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--main-color);
}



/*====================================================
OTHERS STYLE AREA
======================================================*/
/*
Preloader Area Style*/
.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow: hidden;
  z-index: 9999;
  background-color: var(--white-color);
}

.loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  -webkit-animation: spin 1.7s linear infinite;
  animation: spin 1.7s linear infinite;
  z-index: 11;
}

.loaded .loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: all 0.3s 1s ease-out;
  transition: all 0.3s 1s ease-out;
}

.loaded .loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded .loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded .loader {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.dot-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


/*
Go Top Style*/
.go-top {
  position: fixed;
  cursor: pointer;
  top: 88%;
  right: -10%;
  background-color: var(--main-color);
  z-index: 4;
  width: 40px;
  text-align: center;
  height: 42px;
  line-height: 42px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: .9s;
  transition: .9s;
}

.go-top i {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  color: var(--white-color);
  -webkit-transition: 0.5s;
  transition: 0.5s;
  font-size: 20px;
}

.go-top i:last-child {
  opacity: 0;
  visibility: hidden;
  top: 60%;
}

.go-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--main-color);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.go-top:hover {
  color: var(--white-color);
  background-color: var(--main-color);
}

.go-top:hover::before {
  opacity: 1;
  visibility: visible;
}

.go-top:hover i:first-child {
  opacity: 0;
  top: 0;
  visibility: hidden;
}

.go-top:hover i:last-child {
  opacity: 1;
  visibility: visible;
  top: 50%;
}

.go-top:focus {
  color: var(--white-color);
}

.go-top:focus::before {
  opacity: 1;
  visibility: visible;
}

.go-top:focus i:first-child {
  opacity: 0;
  top: 0;
  visibility: hidden;
}

.go-top:focus i:last-child {
  opacity: 1;
  visibility: visible;
  top: 50%;
}

.go-top.active {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  right: 3%;
  top: 86%;
}

.footer-go-top {
  background-color: #fff;
}

.footer-go-top::before {
  background-color: var(--white-color);
}

.footer-go-top:hover {
  background-color: var(--white-color);
}

.footer-go-top i {
  color: var(--main-color);
}

/*====================================================
Carousel Slider 5.2.3
======================================================*/
.carousel-indicators [data-bs-target] {
  width: 16px;
  height: 16px !important;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.30);
  border: 1px solid transparent;
}

.carousel-indicators .active {
  background-color: #fff;
}




/* Owl Carousel*/

.owl-theme .owl-nav [class*=owl-]:hover {
  background-color: var(--main-color);
}

.owl-theme .owl-nav .disabled {
  opacity: 1;
}


.owl-dots {
  display: none;
}


/* Search Icon */
.my-search {
  display: flex;
  justify-content: center;
  align-items: center;
}

.my-search {
  height: 30px;
  display: flex;
  cursor: pointer;
  padding: 10px 20px;
  background: transparent;
  align-items: center;
  transition: 0.8s all ease-in-out;
  margin: 0 10px;
}


.my-search:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
  background-color: var(--main-color);
}

.my-search:hover input {
  width: 200px;
}

.my-search input {
  width: 0;
  outline: none;
  border: none;
  font-weight: 500;
  transition: 0.5s all ease-in-out;
  background: transparent;
  color: var(--white-color);
}

.my-search input::placeholder {
  color: var(--white-color);
}

.my-search button {
  background: transparent;
}

.my-search button .fas {
  color: #1daf;
  font-size: 18px;
}

.my-search-icon {
  color: var(--white-color);
}


@media only screen and (max-width: 991px) {
  .my-search {
    height: 24px;
    padding: 5px 10px;
  }
}

@media only screen and (max-width: 767px) {
  .my-search {
    height: 20px;
    padding: 5px 10px;
  }

  .my-search:hover input {
    width: 100px;
  }

  .my-search input {
    font-size: 13px;
  }

  .my-search-icon {
    font-size: 14px;
  }
}

@media only screen and (max-width: 420px) {
  .my-search:hover input {
    width: 80px;
  }
}

/* End Search */



/* Section title */

.section-headship {
  margin-bottom: 70px;
}

.section-header {
  display: flex;
  align-items: center;

}

.section-line {
  width: 20px;
  height: 3px;
  background-color: var(--section-color);
  border-radius: 1px;
}

.section-header-info {
  font-size: var(--font-size);
  color: #7E8192;
  font-weight: 400;
  margin: 0 5px;
}

.section-title {
  margin-top: 30px;
  margin-bottom: 25px;
}

.section-title h3 {
  color: var(--section-color);
  font-size: 40px;
  font-weight: 700;
  margin-top: 30px;
  margin-bottom: 25px;
}

.section-text {
  width: 537px;
}

.section-text span {
  font-size: 14px;
  color: var(--section-color);
  font-weight: 400;
}


@media screen and (max-width: 991px) {
  .section-title {
    text-align: center;
  }

  .section-header {
    justify-content: center;
  }

  .section-text {
    width: 100%;
    text-align: center;
  }
}

/* Pages  */
.main-container {
  background-color: var(--white-color);
  padding: 20px 10px;
}

.pages-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 80px;
}
.pages-pagination .page-item{
  border-radius: 5px;
  margin-right: 10px;
}

.pages-pagination .page-link{
 border-radius: 5px;
 color:  #474747;
font-family: Poppins;
font-size: 14px;
font-style: normal;
font-weight: 500;

}
.pages-pagination .page-link:hover , .pages-pagination .page-link:focus{
  border-radius: 5px;
  background:  #233C7C;
 color: var(--white-color);

}
.pages-header {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 280px;
  position: relative;
}

.pages-header-bg-color {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(35, 60, 124, 0.80);
  backdrop-filter: blur(2px);
}

.pages-container {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pages-header-left {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.pages-header-left p:first-child {
  color: #FFF;
  font-size: 30px;
  font-weight: 700;
}
.pages-header-left p , .pages-header-right span , .pages-header-right a{
  z-index: 9;
}

.pages-header-left p:last-child {
  color: rgba(252, 252, 255, 0.70);
  font-size: 16px;
  font-weight: 700;
}

.pages-header-right {
  display: flex;
  justify-content: center;
  align-items: center;
    width: 200px;
}

.pages-header-right a {
  color: rgba(252, 252, 255, 0.60);
  font-size: 16px;
  font-weight: 700;
    white-space: nowrap;
}

.pages-header-right span {
  color: #FCFCFF;
  font-size: 16px;
  font-weight: 700;
}