@font-face {
   font-family: "Roboto Condensed";
   src: url("fonts/RobotoCondensed-Regular.ttf");
   font-style: normal;
   font-weight: 400;
}

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

body {
   font-family: "Roboto Condensed", sans-serif;
   background-color: white;
}

a {
   text-decoration: none;
}

ul {
   list-style: none;
}

.container {
   max-width: 1140px;
   padding: 0 15px;
   margin: 0 auto;
}

.title {
   color: #025e9e;
   text-align: center;
   font-size: 32px;
   line-height: 40px;
}

.table {
   padding-top: 40px;
   padding-bottom: 40px;
}

.main-header {
   padding: 22px 0 23px 0;
   background-color: #f7f7f7;
}

.main-header .container {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
}

.logo__img {
   max-width: 250px;
   width: 100%;
   object-fit: cover;
}

.info {
   display: flex;
   align-items: center;
   flex-direction: column;
}

.info p {
   font-size: 32px;
   color: #23323a;
   margin-right: 10px;
}

.info__text {
   display: flex;
   align-items: center;
}

.socmedia {
   display: flex;
   align-items: center;
   font-size: 17px;

}

.insta-img {
   width: 25px;
}

.line {
   height: 23px;
   width: 1.5px;
   background: #000;
   margin-right: 7px;
   margin-left: 8px;
}

/* .info__link {
   color: #333333;
   font-size: 16px;
   text-transform: uppercase;
} */

.info__text li {
   font-size: 11px;
}

.info__text::after {
   border-right: 1px solid #666;
   content: "";
   display: inline-block;
   height: 22px;
   position: relative;
   top: 1px;
   margin: 0 12px;
}

.info__media {
   display: flex;
}

.info__media img {
   width: 30px;
}

.info__link_icon {
   display: flex;
   padding: 7px;
}

.d-flex {
   display: flex;
   flex-direction: column;
}

.preview {
   position: relative;
}

.wrapper {
   position: absolute;
   padding: 15px 0;
   background: rgba(255, 255, 255, 0.67);
   z-index: 99;
   width: 100%;
}

.menu {
   display: flex;
   justify-content: center;
}

.burger {
   transition: 0.5s;
   display: none;
}

.burger img {
   width: 20px;
}

.buttonn {
   background: transparent;
   border: none;
}

.menu__link {
   color: #23323a;
   font-size: 14px;
   text-transform: uppercase;
}

.menu li {
   margin-right: 14px;
}

.menu span {
   margin-right: 10px;
}

.preview__img {
   width: 100%;
   height: 774px;
   object-fit: cover;
}

.prev-about__img {
   width: 100%;
   height: 375px;
   object-fit: cover;
   object-position: center;
}

.preview__title {
   font-size: 60px;
   font-weight: 900;
   color: #fff;
   position: absolute;
   top: 50px;
   left:50%;
   transform:translate(-50%);
}

.preview__title_bottom {
   position: absolute;
   letter-spacing: 1.2px;
   font-size: 41px;
   color: rgb(255, 255, 255);
   top: 318px;
   left: 15px;
   text-align: left;
   font-weight: 300;
   text-decoration: none;
   line-height: 45px;
   background: rgba(41, 41, 43, 0.75);
   border-radius: 4px;
   padding: 4px;
   margin: 0px;
   z-index: auto;
   width: auto;
   height: auto;
   border-width: 0px;
}

.mt200 {
   margin-top: 200px;
}

.main {
   margin-top: 70px;
}

.contact__content {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 50px;
}

.contact-card {
   display: flex;
   margin-bottom: 20px;
}

.card__icon {
   width: 45px;
   height: 48px;
   color: #008fd5;
   background: rgba(12, 86, 222, 0.1) ;
   border-radius: 7px;
   padding: 10px;
   margin-right: 10px;
   display: inline-block;
}

.telegram {
   display: flex;
}

.tg {
   width: 24px;
}

.contact-card__ul {
   display: flex;
   align-items: center;
}

.contact-card__ul span {
   padding-right: 10px;
}

.contact__desc,
.contact__link {
   font-size: 14px;
}

.contact__desc {
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.contact__link {
   color: #000;
   display: flex;
   align-items: center;
}

.contact-form__inputs {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   row-gap: 20px;
   column-gap: 15px;
}

.contact-form__input {
   border-radius: 7px;
   border: 1px solid #b9b9b9;
   outline: none;
   padding: 15px;
}

.contact-form__textarea {
   width: 100%;
   margin-top: 30px;
   resize: none;
}

.contact {
   margin-bottom: 70px;
}

.contact-form {
   text-align: center;
}

.about {
   padding: 40px 0;
}

.about__title {
   color: #025e9e;
   margin: 20px auto 42px auto;
   text-align: center;
   font-size: 32px;
}

.ceyo__img {
   width: 100%;
   height: 400px;
}

.about__desc {
   text-align: justify;
   color: #333333;
   margin-bottom: 30px;
}

.cards {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   margin: 0 auto;
   gap: 2px;
}

.card {
   height: 215px;
   position: relative;
   overflow: hidden;
}

.card__img {
   width: 100%;
   object-fit: cover;
}

.card__desc {
   position: absolute;
   width: 100%;
   padding: 0 20px;
   bottom: 20px;
   color: #fff;
   font-size: 18px;
   z-index: 19;
}

.card__desc-wrapper {
   width: 100%;
   height: 100%;
   position: absolute;
   margin-top: -10px;
   top: 100%;
   opacity: 1;
   visibility: inherit;
   transform-style: flat;
   bottom: 0px;
   border: 0px solid transparent;
   outline: 0px solid transparent;
   background: rgba(25, 36, 42, 0.8);
   transition: 0.5s;
}

.card__desc-wrapper:hover {
   margin-top: 0;
   top: 70%;
   left: 0;
}

.mb10 {
   margin-bottom: 10px;
}

.pt32 {
   padding-top: 32px;
}

.pt10 {
   padding-top: 10px;
}

.b10 {
   font-weight: 700;
}

.contact-form__btn {
   color: #fff;
   background: #3030ff;
   border-radius: 5px;
   padding: 10px 20px;
   border: none;
   margin-top: 30px;
   height: 42px;
   border: none;
   color: #f2f2f2;
   padding: 10px;
   font-size: 18px;
   border-radius: 5px;
   position: relative;
   box-sizing: border-box;
   transition: all 500ms ease;
}

.contact-form__btn:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 42px;
   background: rgba(255, 255, 255, 0.3);
   border-radius: 5px;
   transition: all 2s ease;
}

.contact-form__btn:hover:before {
   width: 100%;
}

.footer {
   color: rgb(255, 255, 255);
   background: black;
   padding: 3px 0;
   margin-top: -4px;
}

.footer .container {
   text-align: right;
}

.footer span {
   color: rgb(51, 143, 196);
   font-size: 12px;
}

.footer__link {
   color: #008fd5;
   font-size: 12px;
}

/* Dropdown Button */
.dropbtn {
   padding: 14px;
   font-size: 14px;
   border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
   position: relative;
   display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
   display: none;
   position: absolute;
   background-color: rgba(255, 255, 255, 0.67);
   min-width: 315px;
   box-shadow: 0px 8px 9px 0px rgba(0,0,0,0.2);
   z-index: 1;
   top: 33px;
}

.table__table {
   margin-top: 45px;
   width: 90%;
}

.col-1, .col-2 {
   padding: 8px 10px;
   font-size: 16px;
}

.col-1 {
   font-weight: 700;
   width: 30%;
   border-right: 1px solid rgba(51, 51, 51, 0.3);
}

.col-2 {
   width: 70%;
}

/* Links inside the dropdown */
.dropdown-content a {
   color: black;
   padding: 10px 14px;
   font-size: 14px;
   text-decoration: none;
   display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;
}

.location__map {
   width: 100%;
   height: 450px;
}

.draco {
   display: flex;
}

.draco__content {
   width: 70%;
}

.draco__img {
   max-width: 400px;
   width: 100%;
}

.draco__headline {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 15px;
}

.draco__headline1 {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 15px;
   margin-top: 22px;
}

.draco__title {
   margin-left: 30px;
   font-size: 18px;
   text-transform: uppercase;
}

.draco__s-img {
   max-width: 400px;
   width: 100%;
}

.tur {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tur__img {
    max-width: 237px;
    width: 100%;
    text-align: center;
}

/*Turizm CSS*/
.draco1 {
   display: flex;
   justify-content: center;
   margin-top: 65px;
   margin-bottom: 35px;
}

.draco__desc {
   font-size: 18px;
}

.draco__title1 {
   color: #025e9e;
   font-weight: bold;
   font-size: 20px;
   margin-top: -30px;
}

.visas {
   display: flex;
   justify-content: space-around;
   margin-bottom: 50px;
}

.visas__content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
}

.visas__img1 {
   max-width: 256px;
   width: 100%;
   /* height: 362px; */
}

.visas__img2 {
   max-width: 537px;
   width: 80%;
   height: 80%;
   object-fit: cover;
}
/* height: 302px; */

.visas__title {
   color: #025e9e;
   font-weight: bold;
   margin-top: 15px;
}

.draco__desc2 {
   color: #025e9e;
   font-weight: bold;
   text-align: center;
}

.draco__sub-title {
   font-size: 20px;
   text-align: center;
}

.draco2 {
   display: flex;
   justify-content: center;
   margin-top: 30px;
}

.ticket {
   display: flex;
   justify-content: center;
}

.ticket__img {
   max-width: 620px;
   width: 100%;
}

.visas__img3 {
   max-width: 368px;
   width: 100%;
}

.visas__img4 {
   max-width: 321px;
   width: 100%;
}

.tickets {
   justify-content: space-between;
}

.moreinfo {
   margin-top: 20px;
   text-align: center;
}