/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

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

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
  color: #3CF;
}

a:hover {
	color: #FC3;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}


.video-overlay.header-text .caption h1 {
  font-size: 38px;
  margin-bottom: 20px;
  text-align: left;
  
  
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 18px;
  line-height: 20px;
  color: #2a2a2a;
  text-align: left;
  padding:10px 10px;
  
   
}

img {
  width: 100%;
  overflow: hidden;
}


/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #f5a425;
  color: #fff;
}

::-moz-selection {
  background: #f5a425;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 10px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 20px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.main-button-red a {
  font-size: 13px;
  color: #fff;
  background-color: #a12c2f;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
}

.main-button-red a:hover {
  opacity: 0.9;
}

.main-button-yellow a {
  font-size: 13px;
  color: #fff;
  background-color: #f5a425;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
}

.main-button-yellow a:hover {
  opacity: 0.9;
}

.section-heading h2 {
  line-height: 40px;
  margin-top: 0px;
  margin-bottom: 50px; 
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(250,250,250,0.15);
  font-size: 24px;
  font-weight: 700;
  text-transform: inherit;
  color: #fff;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.sub-header {
  background-color: #1f272b;
  position: relative;
  z-index: 1111;
}

.sub-header .left-content p {
  color: #fff;
  padding: 0px 0px;
  font-size: 13px;
}

.sub-header .right-icons {
  text-align: right;
  padding: 0px 0px;
}

.sub-header .right-icons ul li {
  display: inline-block;
  margin-left: 15px;
}

.sub-header .right-icons ul li a {
  color: #fff;
  font-size: 18px;
  transition: all .3s;
}

.sub-header .right-icons ul li a:hover {
  color: #f5a425;
}

.sub-header .left-content p em {
   font-style: normal;
   color: #f5a425;
}

.background-header {
  background-color: #fff!important;
  height: 80px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #F80404!important;
}

.background-header .main-nav .nav li:hover a {
  color: #fb5849!important;
}

.background-header .nav li a.active {
  color: #fb5849!important;
}

.header-area {
  background-color: rgba(250,250,250,0.15);
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 100px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.background-header .main-nav .logo {
  line-height: 75px;
}

.background-header .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 15px;
  padding-right: 15px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #f5a425!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #f5a425!important;
  opacity: 1;
}

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .nav li.has-sub:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 5px;
  top: 12px;
}

.background-header .main-nav .nav li.has-sub:after {
  color: #1e1e1e;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 40px;
  opacity: 0;
  transition: all .3s;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.has-sub ul li a:hover {
  background: #fff;
  color: #f5a425!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.has-sub ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.has-sub:hover ul.sub-menu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #f5a425;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 7px;
    padding-right: 7px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    color: #F10303;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #f5a425!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #f5a425!important;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
  }
  .header-area .main-nav .nav li.has-sub:after {
    color: #3B566E;
    right: 30px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

.main-banner {
  position: relative;
  max-height: 100%;
  overflow: hidden;
  margin-bottom: -7px;
}

#bg-video {
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: 100vh;
    object-fit: cover;
    z-index: -1;
}

#bg-video::-webkit-media-controls {
    display: none !important;
}

.video-overlay {
    position: absolute;
    background-color: rgba(31,39,43,0.6);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
}

.main-banner .caption {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.main-banner .caption h6 {
  margin-top: 0px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

.main-banner .caption h2 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 43px;
  text-transform:
  inherit;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

}

.main-banner .caption h1 {
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 43px;
	text-transform: inherit;
	font-weight: 600;
	color: #EC6001;
	letter-spacing: 1px;
}

.main-banner .caption h2 em {
  font-style: normal;
  color: #f5a425;
  font-weight: 900;
}

.main-banner .caption p {
  color: #fff;
  font-size: 18px;
  max-width: 570px;
}

.main-banner .caption .main-button-red {
  margin-top: 30px;
}

@media screen and (max-width: 767px) {

  .main-banner .caption h6 {
    font-weight: 500;
  }

  .main-banner .caption h2 {
    font-size: 36px;
  }

}


/*
---------------------------------------------
services
---------------------------------------------
*/

.services {
  margin-top: -135px;
  position: absolute;
  width: 100%;
}

.services .item {
  background-image: url(../images/service-item-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 20px;
  text-align: center;
  color: #fff;
  padding: 40px;
}

.services .item .icon {
  max-width: 60px;
  margin: 0 auto;
}

.services .item h4 {
  margin-top: 25px;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 600;
}

.services .item p {
  color: #fff;
  font-size: 13px;
}

.services .owl-nav {
  display: inline-block !important;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-25px);
}
    
.services .owl-nav .owl-prev{
  margin-right: 10px;
  outline: none;
  position: absolute;
  left: -80px;
}

.services .owl-nav .owl-prev span,
.services .owl-nav .owl-next span {
  opacity: 0;
}

.services .owl-nav .owl-prev:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #1e1e1e;
  font-size: 25px;
  font-weight: 700;
  content: '\f104';
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}

.services .owl-nav .owl-prev {
  opacity: 1;
  transition: all .5s;
}

.services .owl-nav .owl-prev:hover {
  opacity: 0.9;
}
жэ чя
.services .owl-nav .owl-next {
  opacity: 1;
  transition: all .5s;
}

.services .owl-nav .owl-next:hover {
  opacity: 0.9;
}

.services .owl-nav .owl-next{
  margin-left: 10px;
  outline: none;
  position: absolute;
  right: -85px;
}

.services .owl-nav .owl-next:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #1e1e1e;
  font-size: 25px;
  font-weight: 700;
  content: '\f105';
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}


/*
---------------------------------------------
upcoming meetings
---------------------------------------------
*/

section.upcoming-meetings {
  background-image: url(../images/meetings-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 200px;
  padding-bottom: 20px;
}

section.upcoming-meetings2 {
  background-image: url(../images/meetings-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 30px;
  padding-bottom: 20px;
}

section.upcoming-meetings .section-heading {
  text-align: center;
}

section.upcoming-meetings .categories {
  background-color: #fff;
  border-radius: 20px;
  padding: 40px;
  margin-right: 45px;
}

section.upcoming-meetings .categories h4 {
  font-size: 18px;
  font-weight: 600;
  color: #1f272b;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

section.upcoming-meetings .categories ul li {
  display: inline-block;
  margin-bottom: 15px;
}

section.upcoming-meetings .categories ul li a {
  font-size: 15px;
  color: #1f272b;
  font-weight: 500;
  transition: all .3s;
}

section.upcoming-meetings .categories ul li a:hover {
  color: #a12c2f;
}

section.upcoming-meetings .categories .main-button-red {
  border-top: 1px solid #eee;
  padding-top: 15px;
  margin-top: 15px;
}

section.upcoming-meetings .categories .main-button-red a {
  width: 100%;
  text-align: center;
}

.meeting-item {
  margin-bottom: 30px;
}

.meeting-item .thumb {
  position: relative;
}

.meeting-item .thumb img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.meeting-item .thumb .price {
  position: absolute;
  left: 10px;
  top: 10px;
}

.meeting-item .thumb .price span {
  font-size: 16px;
  color: #1f272b;
  font-weight: 600;
  background-color: rgba(250,250,250,0.9);
  padding: 7px 12px;
  border-radius: 10px;
}

.meeting-item .down-content {
  background-color: #fff;
  padding: 30px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.meeting-item .down-content .date {
  float: left;
  text-align: center;
  display: inline-block;
  margin-right: 20px;
}

.meeting-item .down-content .date h6 {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  color: #a12c2f;
}

.meeting-item .down-content .date span {
  display: block;
  color: #1f272b;
  font-size: 22px;
  margin-top: 7px;
}

.meeting-item .down-content h4 {
  font-size: 18px;
  color: #1f272b;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 15px;
}

.meeting-item .down-content p {
  margin-left: 50px;
  color: #1f272b;
  font-size: 14px;
}



/*
---------------------------------------------
apply now
---------------------------------------------
*/

section.apply-now {
  background-image: url(../images/apply-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0px;
}

section.apply-now .item {
  background-color: rgba(70,179,179,0.4);
  padding: 40px;
  margin-bottom: 30px;
}

section.apply-now .item h3 {
  color: #fff;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}

section.apply-now .item p {
  color: #fff;
  margin-bottom: 20px;
  font-size: 16px;
}

.accordions {
  border-radius: 20px;
  padding: 40px;
  background-color: #fff;
  margin-left: 45px;
}
.accordions .accordion {
  border-bottom: 1px solid #eee;
}
.accordions .last-accordion {
  border-bottom: none;
}
.accordion-head {
  padding: 20px;  
  font-size: 18px;
  font-weight: 700;
  color: #1f272b;
  cursor: pointer;
  transition: color 200ms ease-in-out;
  border-bottom: 1px solid #fff;
}
@media screen and (min-width: 768px) {
  .accordion-head {
    padding: 1rem;
    font-size: 1.2rem;
  }
}
.accordion-head .icon {
  float: right;
  transition: transform 200ms ease-in-out;
}
.accordion-head.is-open {
  color: #f5a425;
  border-bottom: none;
}
.accordion-head.is-open .icon {
  transform: rotate(45deg);
}
.accordion-body {
  overflow: hidden;
  height: 0;
  transition: height 300ms ease-in-out;
  border-bottom: 1px solid #fff;
}
.accordion-body > .content {
  padding: 20px;
  padding-top: 0;
}


/* 
---------------------------------------------
courses
--------------------------------------------- 
*/

section.our-courses {
  background-image: url(../images/meetings-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 20px;
  padding-bottom: 30px;
}

.our-courses .item .down-content {
  background-color: #fff;
}

.our-courses .item .down-content h4 {
  padding: 25px;
  font-size: 18px;
  color: #1f272b;
  text-align: center; 
  border-bottom: 1px solid #eee;
}

.our-courses .item .down-content .info {
  padding: 25px;
}

.our-courses .item .down-content .info ul li {
  display: inline-block;
  margin-right: 1px;
}

.our-courses .item .down-content .info ul li i {
  color: #f5a425;
  font-size: 14px;
}

.our-courses .item .down-content .info span {
  color: #a12c2f;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  display: inline-block;
  width: 100%;
}

.our-courses .owl-nav {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-45px);
}

.our-courses .owl-dots {
  display: inline-block;
  text-align: center;
  width: 100%;
  margin-top: 40px;
}

.our-courses .owl-dots .owl-dot {
  transition: all .5s;
  width: 7px;
  height: 7px;
  background-color: #fff;
  margin: 0px 5px;
  border-radius: 50%;
  outline: none;
}

.our-courses .owl-dots .active {
  width: 24px;
  height: 8px;
  border-radius: 4px;
}
    
.our-courses .owl-nav .owl-prev{
  margin-right: 10px;
  outline: none;
  position: absolute;
  left: -80px;
}

.our-courses .owl-nav .owl-prev span,
.our-courses .owl-nav .owl-next span {
  opacity: 0;
}

.our-courses .owl-nav .owl-prev:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #1e1e1e;
  font-size: 25px;
  font-weight: 700;
  content: '\f104';
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}

.our-courses .owl-nav .owl-prev {
  opacity: 1;
  transition: all .5s;
}

.our-courses .owl-nav .owl-prev:hover {
  opacity: 0.9;
}

.our-courses .owl-nav .owl-next {
  opacity: 1;
  transition: all .5s;
}

.our-courses .owl-nav .owl-next:hover {
  opacity: 0.9;
}

.our-courses .owl-nav .owl-next{
  margin-left: 10px;
  outline: none;
  position: absolute;
  right: -85px;
}

.our-courses .owl-nav .owl-next:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #1e1e1e;
  font-size: 25px;
  font-weight: 700;
  content: '\f105';
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}


/*
---------------------------------------------
our facts
---------------------------------------------
*/

section.our-facts {
  background-image: url(../images/facts-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 20px 0px 25px 0px;
}

section.our-facts h2 {
  font-size: 38px;
  color: #fff;
  line-height: 50px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 50px;
}

.count-area-content {
  text-align: center;
  background-color: rgba(250,250,250,0.15);
  border-radius: 20px;
  padding: 25px 30px 35px 30px;
  margin: 15px 0px;
}

.percentage .count-digit:after {
  content: '%';
  margin-left: 3px;
}

.count-digit {
    margin: 5px 0px;
    color: #f5a425;
    font-weight: 700;
    font-size: 36px;
}
.count-title {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.5px;
}

.new-students {
  margin-top: 45px;
}

section.our-facts .video {
  text-align: center;
  margin-left: 70px;
  background-image: url(../images/video-item-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 20px;
}

section.our-facts .video img {
  padding: 170px 0px;
  max-width: 56px;
}


/* 
---------------------------------------------
contact us
--------------------------------------------- 
*/

section.contact-us {
  background-image: url(../images/meetings-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 20px 0px 0px 0px;
}

section.contact-us #contact {
  background-color: #fff;
  border-radius: 20px;
  padding: 40px;
}

section.contact-us #contact h2 {
  text-transform: uppercase;
  color: #1f272b;
  border-bottom: 1px solid #eee;
  margin-bottom: 40px;
  padding-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
}

section.contact-us #contact input {
  width: 100%;
  height: 40px;
  border-radius: 20px;
  background-color: #f7f7f7;
  outline: none;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: #7a7a7a;
  padding: 0px 15px;
  margin-bottom: 30px;
}

section.contact-us #contact textarea {
  width: 100%;
  min-height: 240px;
  max-height: 280px;
  border-radius: 20px;
  background-color: #f7f7f7;
  outline: none;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: #7a7a7a;
  padding: 55px;
  margin-bottom: 15px;
}

section.contact-us #contact button {
  font-size: 13px;
  color: #fff;
  background-color: #a12c2f;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
  border: none;
  outline: none;
}

section.contact-us #contact button:hover {
  opacity: 0.9;
}

section.contact-us .right-info {
  background-color: #a12c2f;
  border-radius: 20px;
  padding: 30px;
}

section.contact-us .right-info ul li {
  display: inline-block;
  border-bottom: 1px solid rgba(250,250,250,0.15);
  margin-bottom: 20px;
  padding-bottom: 20px;
}

section.contact-us .right-info ul li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

section.contact-us .right-info ul li h6 {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}

section.contact-us .right-info ul li span {
  display: block;
  font-size: 16px;
  color: #fff;
  font-weight: 700;
}

.footer {
  text-align: center;
  margin-top: 100px;
  border-top: 1px solid rgba(250,250,250,0.15);
  padding: 50px 0px;
}
.footer p {
  text-transform: inherit;
  font-size: 16px;
  color: #8A7644;
}

.footer p a {
  color: #f5a425;
}


/*
---------------------------------------------
heading page
---------------------------------------------
*/

/* Базовый стиль для всех секций heading-page */
section.heading-page {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 330px;
    padding-bottom: 110px;
    text-align: center;
    
    /* Базовые настройки текста */
    font-family: 'Poppins', Arial, sans-serif;
    color: #fff;
}

/* Стили для конкретных страниц */
section.heading-page.calculator-page {
    background-image: url('../images/calculator_dla_svai.jpg');
}

section.heading-page.articles-page {
    background-image: url('../images/important_articles_fag.jpg');
}

/* Стили для заголовков */
section.heading-page h2 {
    margin-top: 20px;
    margin-bottom: 30px; /* объединили margin-bottom */
    font-size: 36px;
    text-transform: uppercase;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
    line-height: 1.2;
}

section.heading-page h6 {
    margin-top: 0;
	font-size: 15px;
    text-transform: uppercase;
	text-align: left;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
    line-height: 1.5;
    margin-bottom: 10px;
	
}

/* Стили для параграфов */
section.heading-page p {
    font-size: 16px;
    line-height: 1.8;
    color: #fff;
    margin-bottom: 20px;
}

/* Особые стили для статей */
section.heading-page.articles-page h2 {
    color: #f5f5f5;
    font-weight: 700;
}

/*
---------------------------------------------
upcoming meetings page
---------------------------------------------
*/

section.meetings-page {
  background-image: url(../images/meetings-page-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 10px;
  padding-bottom: 0px;
}

section.meetings-page .filters {
  text-align: center;
  margin-bottom: 60px;
}

section.meetings-page .filters li {
  font-size: 13px;
  color: #a12c2f;
  background-color: #fff;
  padding: 11px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all .3s;
  cursor: pointer;
  margin: 0px 3px;
}

section.meetings-page .filters ul li.active,
section.meetings-page .filters ul li:hover {
  background-color: #a12c2f;
  color: #fff;
}

section.meetings-page .pagination {
  text-align: center;
  width: 100%;
  margin-top: 30px;
  display: inline-block;
}

section.meetings-page .pagination ul li {
  display: inline-block;
}

section.meetings-page .pagination ul li a {
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 10px;
  color: #1f272b;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  font-weight: 600;
  font-size: 15px;
  transition: all .3s;
}

section.meetings-page .main-button-red {
  text-align: center;
}

section.meetings-page .main-button-red a {
  padding: 12px 60px;
  text-align: center;
  margin-top: 30px;
}

section.meetings-page .pagination ul li.active a,
section.meetings-page .pagination ul li a:hover {
  background-color: #a12c2f;
  color: #fff;
}

.meeting-single-item .thumb {
  position: relative;
}

.meeting-single-item .thumb img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.meeting-single-item .thumb .price {
  position: absolute;
  left: 20px;
  top: 20px;
}

.meeting-single-item .thumb .price span {
  font-size: 16px;
  color: #1f272b;
  font-weight: 600;
  background-color: rgba(250,250,250,0.9);
  padding: 7px 12px;
  border-radius: 10px;
}

.meeting-single-item .down-content {
  background-color: #fff;
  padding: 40px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.meeting-single-item .thumb .date {
  position: absolute;
  background-color: rgba(250,250,250,0.9);
  width: 80px;
  height: 80px;
  text-align: center;
  padding: 15px 0px;
  border-radius: 10px;
  right: 20px;
  top: 20px;
}

.meeting-single-item .thumb .date h6 {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  color: #a12c2f;
}

.meeting-single-item .thumb .date span {
  display: block;
  color: #1f272b;
  font-size: 22px;
  margin-top: 7px;
}

.meeting-single-item .down-content h4 {
  font-size: 22px;
  color: #1f272b;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 15px;
}

.meeting-single-item .down-content h5 {
  font-size: 18px;
  color: #1f272b;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 15px;
}

.meeting-single-item .down-content p {
  color: #1f272b;
  font-size: 14px;
}

.meeting-single-item .down-content p.description {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #eee;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #eee;
}

.meeting-single-item .down-content .share {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #eee;
}

.meeting-single-item .down-content .share h5 {
  float: left;
  margin-right: 10px;
  margin-bottom: 0px;
}

.meeting-single-item .down-content .share ul li {
  display: inline;
}

.meeting-single-item .down-content .share ul li a {
  font-size: 14px;
  color: #1f272b;
  transition: all .3s;
}

.meeting-single-item .down-content .share ul li a:hover {
  color: #f5a425;
}

/* Meeting item column */
.templatemo-item-col {
	width: 31%;
}

@media (max-width: 992px) {
	.templatemo-item-col {
		width: 45%;
	}
}

@media (max-width: 767px) {
	.templatemo-item-col {
		width: 100%;
	}
}


/* Общие стили для всех заголовков */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: 1.2;
    color: #333; /* базовый цвет текста */
    font-family: 'Poppins', Arial, sans-serif;
    letter-spacing: 0.5px;
}

/* h1 - основной заголовок */
h1 {
    font-size: 3rem; /* 48px */
    font-weight: 700;
    margin-bottom: 20px;
}

/* h2 - подзаголовок */
h2 {
    font-size: 2.4rem; /* 38px */
    font-weight: 600;
    margin-bottom: 15px;
}

/* h3 - заголовок раздела */
h3 {
    font-size: 1.8rem; /* 28px */
    font-weight: 600;
    margin-bottom: 10px;
}

/* h4 - подподзаголовок */
h4 {
    font-size: 1.4rem; /* 22px */
    font-weight: 500;
    margin-bottom: 8px;
}

/* h5 - мелкий заголовок */
h5 {
    font-size: 1.2rem; /* 19px */
    font-weight: 500;
    margin-bottom: 6px;
}

/* h6 - самый мелкий заголовок */
h6 {
    font-size: 1rem; /* 16px */
    font-weight: 500;
    margin-bottom: 4px;
}


/* Заголовки на тёмном фоне */
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6 {
    color: #fff; /* белый цвет текста */
}

/* Особые стили для главной страницы */
.home-page h1 {
    font-size: 4rem;
    color: #f5a425;
}

/* Особые стили для блога */
.blog-page h2 {
    font-weight: 500;
    letter-spacing: 1px;
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1300px) {
  .services .owl-nav .owl-next{
    right: -30px;
  }
  .services .owl-nav .owl-prev{
    left: -25px;
  }
  .our-courses .owl-nav .owl-next{
    right: -30px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -25px;
  }
}

@media (max-width: 1200px) {
  .services .owl-nav .owl-next{
    right: -70px;
  }
  .services .owl-nav .owl-prev{
    left: -65px;
  }
  .our-courses .owl-nav .owl-next{
    right: -70px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -65px;
  }
}

@media (max-width: 1085px) {
  .services .owl-nav .owl-next{
    right: -30px;
  }
  .services .owl-nav .owl-prev{
    left: -25px;
  }
  .our-courses .owl-nav .owl-next{
    right: -30px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -25px;
  }
}

@media (max-width: 1005px) {
  .services .owl-nav .owl-next{
    display: none;
  }
  .services .owl-nav .owl-prev{
    display: none;
  }
  .our-courses .owl-nav .owl-next{
    display: none;
  }
  .our-courses .owl-nav .owl-prev{
    display: none;
  }
}

@media (max-width: 992px) {

  .main-banner .caption {
    top: 60%;
  }

  .main-banner .caption h2 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 22px;
  }

  .main-banner .caption .main-button-red {
    margin-top: 15px;
  }

  .services {
    margin-top: 60px;
  }

  section.upcoming-meetings {
    padding-top: 400px;
  }

  section.upcoming-meetings .categories {
    margin-right: 0px;
    margin-bottom: 30px;
  }

  .accordions {
    margin-left: 0px;
  }

  .new-students {
    margin-top: 15px;
  }

  section.our-facts .video {
    margin-left: 0px;
    margin-top: 15px;
  }

  section.contact-us #contact {
    margin-bottom: 30px;
  }

}

@media (max-width: 767px) {

  .sub-header .left-content p {
    display: none;
  }

  .sub-header .right-icons {
    text-align: center;
  }

  .main-nav .nav .sub-menu {
    display: none;
  }

  .header-area .main-nav .nav li ul.sub-menu li a {
    color: #1f272b;
  }

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f7fa;
    color: #333;
    line-height: 1.6;
}

.calculator-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: left;
    margin-bottom: 30px;
    color: #ED7F03;
    font-size: 40px;
}

.sway-calculator {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

label {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
}

select, input[type="number"] {
    padding: 12px 16px;
    border: 2px solid #e0e6ed;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

select:focus, input[type="number"]:focus {
    outline: none;
    border-color: #4CAF50;
}

.input-group {
    display: flex;
    gap: 10px;
}

.calculate-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 14px 20px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.calculate-btn:hover {
    background-color: #45a049;
}

.result {
    margin-top: 25px;
    padding: 15px;
    background-color: #e8f5e9;
    border-left: 4px solid #4CAF50;
    border-radius: 4px;
    font-size: 16px;
    color: #2e7d32;
}

/* Адаптивность */
@media (max-width: 600px) {
    .calculator-container {
        margin: 20px;
        padding: 20px;
    }
    
    .input-group {
        flex-direction: column;
    }
}

 /* Для мобильных устройств (ширина экрана до 768px) */
@media (max-width: 768px) {
  .video-overlay .header-text .caption h1 {
    font-size: 24px; /* уменьшили до 24px */
  }
}

@media (max-width: 768px) {
  .video-overlay .header-text .caption h1 {
    font-size: 75%; /* 75% от исходного размера */
  }
}

@media (max-width: 480px) {
  .video-overlay .header-text .caption h1 {
    font-size: 20px; /* ещё меньше для смартфонов */
  }
}

@media (max-width: 375px) {
  .video-overlay .header-text .caption h1 {
    font-size: 20px;
    line-height: 1.3; /* улучшает читаемость */
  }
}

.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 15px 0;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
}
.breadcrumb li {
  margin-right: 10px;
}
.breadcrumb li::after {
  content: "→";
  margin-left: 10px;
  color: #999;
}
.breadcrumb li:last-child::after {
  content: "";
}
.breadcrumb a {
  color: #007bff;
  text-decoration: none;
}
.breadcrumb .active {
  color: #666;
  font-weight: bold;
}


/* Общий контейнер */
.content-block {
    background-color: #ffffff; /* Белый фон */
    padding: 20px; /* Отступы внутри блока */
    border-radius: 15px; /* Закругление углов контейнера */
    margin-bottom: 20px; /* Отступ между блоками */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Лёгкая тень для объёма */
}

/* Блоки с текстом и изображениями */
.block {
    background-color: #f8f9fa; /* Светло-серый фон блоков */
    padding: 15px; /* Внутренние отступы */
    border-radius: 10px; /* Закругление углов блоков */
    margin-bottom: 15px; /* Отступы между блоками */
}

/* Контейнеры с изображениями */
.image-container {
    border-radius: 8px; /* Закругление углов для контейнеров с изображениями */
    overflow: hidden; /* Скрывает содержимое, выходящее за границы */
    margin-bottom: 10px; /* Отступ под изображением */
}

/* Стили для заголовков h2 внутри блоков */
.block h2 {
    color: #333; /* Тёмный цвет текста */
    margin-top: 0; /* Убираем верхний отступ у заголовков */
    font-weight: 600; /* Жирный шрифт */
}

/* Стили для абзацев (p) внутри блоков */
.block p {
    line-height: 1.6; /* Межстрочный интервал */
    color: #666; /* Цвет текста */
    margin-bottom: 10px; /* Отступы между абзацами */
}

/* Стили для элемента picture (адаптивные изображения) */
.image-container picture {
    width: 100%; /* Ширина 100% от родителя */
    max-width: 100%; /* Ограничение максимальной ширины */
}

/* Адаптивная оптимизация (для мобильных устройств) */
@media (max-width: 768px) {
    .content-block {
        padding: 10px; /* Уменьшаем отступы на мобильных */
    }
    
    .block {
        padding: 8px; /* Меньшие отступы внутри блоков */
        border-radius: 8px; /* Чуть меньше скругление */
    }
}



/* Общие стили, галерея
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
}
*/
/* Стили для секции галереи
.gallery-section {
    padding: 40px 0;
    background-color: #f9f9f9;
}
 */
/* Стили для заголовков
h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
}

h2 {
    font-size: 2rem;
    margin-bottom: 15px;
    text-align: center;
    color: #555;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 30px;
    text-align: center;
    color: #777;
}
 */
/* Базовые стили для галереи */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.gallery a {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.gallery img {
    width: 100%;
    height: auto;
    display: block;
}

.gallery a:hover {
    transform: scale(1.02);
}

/* Стили для просмотра в новом окне */
.gallery a[target="_blank"] {
    cursor: zoom-in;
}

/* Адаптивные стили */
@media (max-width: 1200px) {
    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 992px) {
    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 10px;
    }
}

@media (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .gallery {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

@media (max-width: 480px) {
    .gallery {
        padding: 10px;
    }
    
    .gallery a {
        padding: 5px;
    }
}

/* Фото меджу текстом */
.image-container {
    max-width: 100%;
    margin: 20px 0;
    text-align: center;
}

.responsive-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}


.image-container {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
}

/* Анимация перед загрузкой */
.responsive-image {
    transition: transform 0.3s ease;
    transform-style: preserve-3d;
}

.responsive-image:hover {
    transform: scale(1.01);
}


/* Стили для сетки статей */
.articles-grid {
    display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.article-card {
    width: 30%;
	align-content:center;
    margin-bottom: 30px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 5px;
    overflow: visible;
    transition: transform 0.3s;
    background-color: #f9f9f9;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}



.article-card img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center; /* или top, если важно сохранить верх */
  border-radius: 5px; /* Скругление всех 4 углов на 5 пикселей */
}

.article-card h2 {
    padding: 15px;
    margin: 0;
    font-size: 18px;
    color: #2c3e50;
}

.article-card p {
    padding: 0 15px 10px;
    margin: 0;
    color: #7f8c8d;
    font-size: 14px;
}

.read-more {
    display: block;
    background-color: #a12c2f;
    color: white;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    border-radius: 20px;
    margin: 0 55px;
}

.read-more:hover {
    background-color: #782023;
}

footer {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}

/* Адаптивные стили */
@media screen and (max-width: 1024px) {
    .article-card {
        width: 45%;
    }
}

@media screen and (max-width: 768px) {
    .article-card {
        width: 100%;
        margin-bottom: 25px;
    }
    
    .articles-grid {
        padding: 5px;
    }
}

@media screen and (max-width: 480px) {
    /* .article-card img {
        height: 200px;
    } */
    
    .article-card h2 {
        font-size: 16px;
    }
    
    .read-more {
        padding: 12px;
        font-size: 14px;
    }
}



@media screen and (max-width: 320px) {
    .article-card h2 {
        font-size: 14px;
    }
    
    .article-card p {
        font-size: 12px;
    }
}




    height: auto;
}

@media screen and (max-width: 768px) {
    .tab-content {
        flex-direction: column;
    }
    
    .content-left, .content-right {
        width: 100%;
    }
}




.container {
    width: 90%;
	align-content:center;
    margin: 0 auto;
    padding: 0px;
}

.button-panel {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.tab-btn {
    padding: 10px 10px;
    border: none;
    border-radius: 22px;
    cursor: pointer;
    font-size: 14px;
    background-color: #e74c3c; /* Красный */
    color: white;
    transition: background-color 0.3s;
}

.tab-btn:hover {
    background-color: #c0392b; /* Тёмно-красный при наведении */
}

.tab-btn.active {
    background-color: #e74c3c;
    font-weight: bold;
}


.content-table {
	background-color: #ffffff; /* белый фон */
    border: 1px solid #ddd;
    overflow: hidden;
	padding: 5px; /* отступы внутри блока */
    border-radius: 15px; /* скругление углов (опционально) */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* лёгкая тень (опционально) */
	
}

.content-item {
    display: none;
    padding: 5px;
    border-bottom: 1px solid #ddd;
}

.content-item.active {
    display: block;
}

.content-item img {
    max-width: 100%;
    height: auto;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .button-panel {
        flex-wrap: wrap;
        justify-content: center;
    }

    .tab-btn {
        margin: 5px;
        flex: 1 1 100%;
    }
}



.header {
  display: flex; /* делает элементы гибкими */
  justify-content: center; /* центрирует содержимое по горизонтали */
  align-items: center; /* выравнивает элементы по вертикали */
  height: 60px; /* задайте нужную высоту */
}

.logo, .menu {
  flex: 1; /* равномерно распределяет пространство */
}

.menu ul {
  display: flex;
  list-style: none; /* убирает маркеры списка */
  padding: 0;
  margin: 0;
}

.menu li {
  margin-left: 10px; /* отступы между пунктами меню */
}


@media (max-width: 768px) {
  .header {
	  align-content:center;
    flex-direction: column; /* стек элементов вертикально на мобильных */
    text-align: center; /* выравнивание текста по центру */
  }
}


/* прайс лист таблица */

.price-table {
  align-content:center;
  width: 100%;
  border-collapse: collapse;
  margin: 5px 0;
}

.price-table th,
.price-table td {
  padding: 5px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.price-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.price-table tr:hover {
  background-color: #f5f5f5;
}

.price-table td {
  color: #333;
  
}

.price-table tbody tr:nth-child(even) {
  background-color: #ffffff;
}



.price-section {
    background-color: white;
    padding: 5px 5px;
    margin: 5px 0;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.price-title {
    font-size: 22px;
    margin-bottom: 20px;
    color: #333;
    font-weight: bold;
}

.main-title {
    display: block;
    color: #e74c3c; /* акцентный цвет */
}

.sub-title {
    font-size: 16px;
    opacity: 0.7;
}




/* Можно добавить анимацию появления заголовка */
.price-title {
    animation: fadeIn 1s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}





/*

.container {
  max-width: 800px;
  margin: 0 auto;
  background-color: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

h1 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 40px;
  font-size: 2rem;
}
*/
.contact-section {
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 30px;
  border: 1px solid #e0e0e0;
}

.contact-section h2 {
  margin-top: 0;
  color: #3498db;
  font-size: 1.5rem;
}

.contact-list {
  list-style: none;
  padding: 0;
}

.contact-list li {
  margin-bottom: 15px;
  display: flex;
  align-items: baseline;
}

.contact-list strong {
  display: inline-block;
  width: 140px;
  color: #2c3e50;
  font-weight: bold;
}

.map-placeholder {
  width: 100%;
  height: 300px;
  background-color: #eee;
  text-align: center;
  line-height: 300px;
  border-radius: 8px;
  margin-top: 15px;
  font-style: italic;
  color: #666;
}


form {
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}

form h2 {
  color: #3498db;
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.3rem;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #2c3e50;
}

input,
textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  box‑sizing: border-box;
}

button {
  background-color: #3498db;
  color: white;
  padding: 14px 28px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #2980b9;
}

/* Адаптивность */
@media (max-width: 768px) {
  .container {
    padding: 5px;
    margin: 5px;
  }

  h1 {
    font-size: 1.8rem;
  }
  
  h2 {
    font-size: 1.4rem; /* уменьшили для h2 */
  }

  h3 {
    font-size: 1.2rem; /* задаём размер для h3 */
  }

 
  .contact-list li {
    flex-direction: column;
  }

  .contact-list strong {
    width: auto;
    margin-bottom: 5px;
  }
}


.map-container {
  width: 100%; /* или фиксированное значение */
  height: 200px; /* задайте нужную высоту */
  overflow: hidden; /* скроет выступающие части карты */
}


@media (max-width: 768px) {
  .map-container {
    height: 300px; /* уменьшенная высота на мобильных */
  }
}



.social-links {
  display: flex;
  gap: 10px;
  margin: 10px 0;
}

.social-links a {
  color: #333;
  text-decoration: none;
}

.social-links i {
  font-size: 18px;
}

.social-links a:hover {
  opacity: 0.8;
}





.image-link img {
  border: none;
  display: block; /* убирает лишний отступ под изображением */
}


.image-link:hover img {
  opacity: 0.9; /* лёгкое затемнение */
  transform: scale(1.02); /* небольшое увеличение */
}


.article-card img {
  max-width: 100%;
  height: auto;
}



.main-banner-image {
  width: 100%;
  height: 100vh;
  object-fit: cover; /* сохраняет пропорции с обрезкой */
  display: block;
}

h1 {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}




/*Скрытие текста на мобилках*/


/* Базовая стилизация кнопки */
.btn-toggle-mobile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0 0;
  padding: 10px 16px;
  background-color: #1a73e8;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-toggle-mobile:hover {
  background-color: #0d5bbb;
}

/* Скрываем блок и кнопку на десктопах */
@media (min-width: 768px) {
  .mobile-only-collapse {
    display: block !important; /* Всегда видим на больших экранах */
  }
  .btn-toggle-mobile {
    display: none; /* Убираем кнопку */
  }
}

/* На мобильных: скрываем текст, оставляем кнопку */
@media (max-width: 767px) {
  .mobile-only-collapse {
    display: none;
    margin-top: 12px;
  }

  .mobile-only-collapse.expanded {
    display: block;
  }
}








.contact-section {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.contact-section h2 {
  text-align: center;
  color: #333;
  margin-bottom: 10px;
}

.text {
  text-align: center;
  color: #666;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

input, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

.theme-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
  width: 100%;
}

.theme-btn:hover {
  background: #0056b3;
}

.theme-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

#responseMessage {
  margin-top: 15px;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
}

.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}