body { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 15px; line-height: 1.6; color: #333; } *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } h1, h2, h3, h4, h5, h6 { margin: 0; } ul, li { list-style: none; } hr { display: block; width: 100%; height: 1px; margin: 40px 0; border: 0; background-color: #fff; } /*Container for higher part */ .container { width: 100%; max-width: 1200px; margin: 0 auto; } .intro { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100vh; background: url(../Final/img/svg/airplaneticketsbooking1.svg); background-size: cover; } .intro__inner { width: 100%; max-width: 880px; margin: 0 auto; text-align: center; } .intro__title { color: #C1E861; font-size: 150px; font-weight: 700; text-transform: uppercase; line-height: 1; opacity: 0; } .intro__title:after { content: ""; display: block; width: 60px; height: 3px; margin: 60px auto; background-color: #C1E861; } .intro__suptitle { margin-bottom: 20px; font-size: 72px; color: #C1E861; font-family: 'Kaushan Script', cursive; } /*Menu bar*/ .li2 { position: relative; list-style: none; background: #333; width: 110px; float: left; } .li2 a:hover:not(.a2) { background-color: #111; } .a1 { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-family: "Roboto", Helvetica, Arial, sans-serif; } .a2 { display: block; color: white; text-align: center; padding: 20px 22px; text-decoration: none; background-color: #DE584F; } .ul1 { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } /**/ /*Header*/ .header { width: 100%; padding-top: 30px; position: absolute; top: 0; left: 0; right: 0; z-index: 1000; background-color: #DE584F; } .header__inner { display: flex; justify-content: space-between; align-items: center; } /*Logo*/ .header__logo { font-size: 30px; font-weight: 700; color: white; } /*Navigation*/ .nav { font-size: 14px; text-transform: uppercase; } .nav__link { display: inline-block; vertical-align: top; margin: 0 15px; position: relative; color: white; text-decoration: none; transition: color .1s linear; } .nav__link:after { content: ""; display: block; width: 100%; height: 3px; background-color: #C1E861; opacity: 0; position: absolute; top: 100%; left: 0; z-index: 1; transition: opacity .1s linear; } .nav__link:hover { color: #C1E861; } .nav__link:hover:after, .nav__link.active:after { opacity: 1; } .nav__link.active { color: #C1E861; } /*Learn More button*/ .btn { display: inline-block; vertical-align: top; padding: 8px 30px; border: 3px solid #C1E861; color: #C1E861; text-transform: uppercase; font-size: 14px; font-weight: 700; text-decoration: none; } .btn:hover { background-color: white; color: #DE584F; } /*Slider*/ .slider { width: 100%; position: absolute; bottom: 0; left: 0; z-index: 1; } .slider__inner { display: flex; justify-content: space-between; } .slider__item { widows: 23%; padding: 20px 0; border-top: 3px solid #C1E861; font-size: 18px; color: #C1E861; text-transform: uppercase; opacity: 0.7; } .slider__item.active { opacity: 1; } .slider__num { font-size: 24px; font-weight: 700; } /*Section*/ .section { padding: 80px 0; } .section--gray { background-color: #f8f8f8; } .section__header { width: 100%; max-width: 950px; margin: 0 auto 50px; text-align: center; } .section__suptitle { font-family: 'Kaushan Script', cursive; font-size: 24px; color: black; } .section__title { font-size: 30px; font-weight: 700; color: black; text-transform: uppercase; } .section__title:after { content: ""; display: block; width: 60px; height: 3px; margin: 30px auto; background-color: #C1E861; } .section__text { color: #999; font-size: 15px; } /*About with images*/ .about { margin-top: 80px; display: flex; justify-content: space-between; } .about__item { width: 380px; background-color: #C1E861; position: relative; } .about__item:hover .about__img { transform: translate3d(-10px, -10px, 0); } .about__item:hover .about__img img { opacity: .1; } .about__item:hover .about__text { opacity: 1; } .about__img { background: linear-gradient(to bottom, #DE584F, white); transition: transform .2s linear; } .about__img img { display: block; transition: opacity .1s linear; } .about__text { width: 100%; font-size: 18px; color: #fff; text-transform: uppercase; font-weight: 700; text-align: center; opacity: 0; position: absolute; top: 50%; left: 0; z-index: 2; transform: translate3d(0, -50%, 0); transition: opacity .2s linear; } /* Statistics */ .statistics { background-color: #DE584F; } .stat { display: flex; } .stat__item { flex: 1 1 0; border-left: 1px solid white; text-align: center; color: white; padding: 70px 25px; } .stat__item:last-child { border-right: 1px solid white; } .stat__cout { margin-bottom: 10px; font-size: 72px; font-weight: 700; line-height: 1; } .slider__text { font-size: 14px; text-transform: uppercase; } /*Services(Our skills)*/ .services { display: flex; } .services__item { flex: 1 1 0; padding-left: 85px; padding-right: 35px; position: relative; } .services__icon { position: absolute; top: 0; left: 28px; z-index: 1; } .services__title { margin-bottom: 10px; font-size: 14px; color: #333; text-transform: uppercase; } .services__text { font-size: 15px; color: #999; } /*Countries part*/ .countries { display: flex; } .countries__item { width: 50%; } /*Counties description part*/ /* .accordion__item { margin-bottom: 10px; border: 1px solid #e5e5e5; } .accordion__item.active .accordion__content { display: block; } .accordion__item.active .accordion__header { border-bottom-color: #e5e5e5; } .accordion__item.active .accordion__header:after { transform: translateY(-50%) rotate(-45deg); margin-top: 5px; } .accordion__header { border: 1px solid #e5e5e5; padding: 15px 20px 15 65px; position: relative; border-bottom: 1px solid transparent; cursor: pointer; } .accordion__header:after { content: ""; display: block; width: 16px; height: 16px; border-top: 2px solid #cccccc; border-right: 2px solid #cccccc; position: absolute; top: 50%; right: 20px; z-index: 1; transform: translateY(-50%) rotate(135deg); } .accordion__icon { position: absolute; top: 50%; left: 20px; z-index: 1; transform: translateY(-50%); } .accordion__title { font-size: 14px; color: #333; text-transform: uppercase; } .accordion__content { display: none; padding: 15px 20px; font-size: 15px; color: #999; font-style: italic; font-weight: 300; } /*Reviews*/ .reviews { padding: 0 110px; position: relative; } .reviews__item { padding-left: 205px; position: relative; } .reviews__pic { position: absolute; top: 0; left: 0; z-index: 1; } .reviews__text { margin-bottom: 15px; font-size: 24px; font-style: italic; font-weight: 300; color: #999; } .reviews__author { font-size: 24px; color: black; font-family: 'Kaushan Script', cursive; } .reviews__author::before { content: ""; display: inline-block; vertical-align: middle; width: 60px; height: 3px; margin-right: 10px; background-color: #DE584F; } .reviews__btn { font-size: 0; color: transparent; position: absolute; top: 50%; z-index: 1; transform: translateY(-50%); } .reviews__btn::after { content: ""; display: block; width: 16px; height: 16px; border-top: 2px solid #cccccc; border-left: 2px solid #cccccc; } .reviews__btn--prev { left: 0; transform: rotate(-45deg); } .reviews__btn--next { right: 0; transform: rotate(135deg); } /* New Accordion*/ .accordion-menu { width: 100%; max-width: 590px; height: 54px; margin: 60px auto 20px; background: #fff; border-radius: 4px; font-family: 'Montserrat', sans-serif; } .accordion-menu li.open .dropdownlink { color: #DE584F; border: 1px solid #e5e5e5; border-bottom: 1px solid transparent #ccc; } .accordion-menu li.open .dropdownlink .fa-chevron-down { -webkit-transform: rotate(180deg); transform: rotate(180deg); border: 1px solid #e5e5e5; border-bottom: 1px solid transparent #ccc; } .accordion-menu li:last-child .dropdownlink { border-bottom: 1px solid transparent #ccc; } .dropdownlink { cursor: pointer; display: block; padding: 15px 20px 15 65px; font-size: 18px; border-bottom: 1px solid transparent #ccc; color: #212121; position: relative; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; border: 1px solid #e5e5e5; } .dropdownlink i { position: absolute; top: 17px; left: 16px; border: 1px solid #e5e5e5; border-bottom: 1px solid transparent #ccc; } .dropdownlink .fa-chevron-down { border: 1px solid #e5e5e5; right: 12px; left: auto; border: 1px solid #e5e5e5; border-bottom: 1px solid transparent #ccc; } .submenuItems { display: none; background: white; border: 1px solid #e5e5e5; border-bottom: 1px solid transparent #ccc; } .submenuItems li { border: 1px solid #e5e5e5; border-bottom: 1px solid transparent #ccc; } .submenuItems a { display: block; color: #727272; padding: 12px 12px 12px 45px; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; border: 1px solid #e5e5e5; border-bottom: 1px solid transparent #ccc; } .submenuItems a:hover { background-color: #DE584F; color: #fff; } /*Slider*/ * { box-sizing: border-box; } .slideshow { max-width: 1000px; position: relative; margin: auto; } .mySlides { display: none; } .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } .next { right: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: none; } .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: .4 } to { opacity: 1 } } @keyframes fade { from { opacity: .4 } to { opacity: 1 } }