*{ box-sizing:border-box } :root{ --main-color:#073763; --second-color:#f5a623; --third-color:#f5a623; scroll-behavior:smooth; --white-color:#fff; --muted:#2e333e; --font-family:"Roboto","sans-serif"; --box-shadow:rgba(17, 17, 26, 0.1) 0px 4px 16px,rgba(17, 17, 26, 0.05) 0px 8px 32px; --sharp-box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; --shadow:0 24px 70px rgba(6, 29, 53, .14); --shadow-soft:0 14px 40px rgba(6, 29, 53, .10); --radius-xl:30px; --radius-lg:22px; --radius-md:16px; --container:1320px; --header-h:84px; --ease:cubic-bezier(.2, .8, .2, 1) } html{ scroll-behavior:smooth } body{ margin:0; font-family:"Playfair Display",Georgia,serif; color:var(--main-color); background:linear-gradient(180deg,#fdfcfb 0,#f7f4ef 100%); line-height:1.65; overflow-x:hidden; text-rendering:optimizelegibility; -webkit-font-smoothing:antialiased; position:relative } ::selection{ background-color:var(--second-color); color:var(--white-color) } img{ max-width:100%; height:auto } button,input,select,textarea{ font:inherit } iframe{ width:100%; border-width:medium; border-style:none; border-color:currentcolor; border-image:initial } li,ol,ul{ list-style:none; margin:0; padding:0 } select:active,select:focus{ box-shadow:none; border:0; outline:0 } .accordion-button:focus{ box-shadow:none; border:0; outline:0 } textarea{ height:220px; padding-top:20px } textarea:focus{ outline:0!important; box-shadow:none!important } h1,h2,h3,h4,h5,h6{ margin:0; padding:0; line-height:1.2 } h1{ font-size:50px; font-weight:700 } h2{ font-size:29px; font-weight:600 } h3{ font-weight:600; font-size:20px } h4{ font-size:18px; font-weight:500 } h5{ font-size:16px; font-weight:400 } p{ font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#424548; font-size:16px } .form-select:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=subject]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,textarea:focus{ border:1px solid var(--main-color); transform:translate3d(0,0,5px); font-size:16px; color:var(--main-color); box-shadow:rgba(0,0,0,.1) 0 4px 30px 0; outline:0!important } .form-check-input:focus{ border-width:medium; border-style:none; border-color:currentcolor; border-image:initial; outline:0; box-shadow:none } .form-select,input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=subject],input[type=tel],input[type=text],input[type=url],textarea{ background:var(--white-color); border:1px solid rgba(0,0,0,.1); outline:0; width:100%; padding:1rem; resize:none; color:var(--black-color); font-size:14px; font-weight:400; position:relative; border-radius:10px } .form-select,input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=subject],input[type=tel],input[type=text],input[type=url]{ height:40px } textarea{ height:200px; padding-top:20px } .text-msg{ margin-bottom:15px!important } textarea:focus{ outline:0!important; box-shadow:none!important } input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{ appearance:none; margin:0 } ::-webkit-scrollbar{ background:rgba(255,255,255,0); width:7px; height:7px } ::-webkit-scrollbar-thumb{ background-color:var(--second-color) } ::-webkit-scrollbar-thumb:hover{ background-color:rgba(0,0,0,.3) } ::-webkit-scrollbar-button{ background-color:var(--second-color); height:15px; display:none } .input-box{ position:relative; margin-bottom:10px } .input-box label{ position:absolute; top:.75rem; z-index:20; left:20px; font-size:12px!important } .input-box label::before{ content:""; width:100%; top:0; height:100%; background:rgba(255,255,255,0); position:absolute; z-index:-1 } .input-box input:focus{ margin-bottom:20px; border-top-width:medium; border-right-width:medium; border-left-width:medium; border-top-style:none; border-right-style:none; border-left-style:none; border-top-color:currentcolor; border-right-color:currentcolor; border-left-color:currentcolor; border-image:initial; border-bottom:1px solid var(--main-color) } .input-box select{ padding:5px 15px 0; height:45px; min-width:100% } .input-box select+label{ position:absolute; left:0; top:-.5rem; background-color:var(--white-color) } .input-box input:not(:placeholder-shown)+label,.input-box input[type=date]:focus+label,.input-box input[type=date]:valid+label,.input-box input[type=email]:focus+label,.input-box input[type=number]:focus+label,.input-box input[type=tel]:valid+label,.input-box input[type=text]:focus+label,.input-box input[type=text]:not(:placeholder-shown)+label,.input-box textarea:focus+label,.input-box textarea:not(:placeholder-shown)+label{ left:0; top:-1.5rem; font-size:14px; color:var(--white-color); padding:3px 5px; background-color:var(--main-color); border-radius:2px } a,a:active,a:focus,a:hover{ text-decoration:none; border-width:medium; border-style:none; border-color:currentcolor; border-image:initial; outline:0; color:#212529 } a:active,a:focus,a:hover{ color:#041126!important } li,ul ol{ list-style:none; margin:0; padding:0; display:inline-block } .tst-header{ text-align:center; margin-bottom:52px } .section-title{ letter-spacing:-.045em; color:var(--main-color); text-wrap:balance; margin:10px 0 12px; font-size:clamp(22px, 3.5vw, 37px) } .tst-subtitle{ color:var(--muted); font-size:16px; max-height:200px; overflow-y:auto; line-height:1.8; padding-right:10px; max-width:100%; margin:0 auto } .tst-subtitle p{ color:var(--muted); font-size:16px; line-height:1.8; padding-right:10px; max-width:100%; margin:0 auto } .tst-subtitle p a{ color:#0056b3!important; font-weight:700 } .scroll-top{ height:60px; width:60px; background-color:var(--white-color); border-radius:50%; position:fixed; bottom:40px; right:50px; transform:scale(0); display:grid; place-items:center; cursor:pointer; visibility:hidden; opacity:0; transition:.3s; z-index:100 } .scroll-top.active{ bottom:50px; transform:scale(1); opacity:1; animation:.5s ease-in-out 0s 1 normal none running scroll-Top; transition:.3s } .scroll-top-value{ height:calc(100% - 6px); width:calc(100% - 6px); background-color:var(--main-color); color:var(--white-color); border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:600 } .scroll-top-value i{ font-size:20px } .scroll-top *{ pointer-events:none } @-webkit-keyframes scroll-Top{ 0%{ transform:translate3d(0,80%,0); opacity:0 } 100%{ transform:translateZ(0); opacity:1 } } @keyframes scroll-Top{ 0%{ transform:translate3d(0,80%,0); opacity:0 } 100%{ transform:translateZ(0); opacity:1 } } .c4t-floating-actions{ position:fixed; right:auto; bottom:22px; z-index:999; display:grid; gap:10px; left:20px } .c4t-float-btn{ font-size:0px; color:transparent } .c4t-float-btn img{ width:57px; height:46px; object-fit:contain; display:block; pointer-events:none } .menu__mobile{ display:none } @media (max-width:760px){ .menu__mobile{ display:block; position:fixed; bottom:0; left:0; right:0; width:100%; z-index:999; background:#fff; backdrop-filter:blur(20px); border-top:1px solid rgba(201,169,97,.35); box-shadow:rgba(10,35,66,.25) 0 -8px 32px; padding:10px 12px clamp(10px,3.5vw,18px); transition:transform .3s,opacity .3s } .menu-mobile-fixed{ display:flex; align-items:center; justify-content:space-between; max-width:480px; margin:0 auto; width:100% } .c4t-floating-actions{ display:none } .menu-mobile-fixed a{ display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1 1 0%; text-align:center; color:#2b3480; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; text-decoration:none; gap:1px; transition:color .3s cubic-bezier(.25, .8, .25, 1) } .menu-mobile-fixed a img{ height:25px; width:23px; object-fit:contain; display:block; transition:filter .3s,transform .3s cubic-bezier(.25, .8, .25, 1); filter:brightness(0) invert(0) opacity(.7) } .menu-mobile-fixed a p{ margin-bottom:0; font-size:9px } .scroll-top.active{ bottom:85px!important; right:20px!important; height:50px!important; width:50px!important } } .site-footer{ position:relative; overflow:hidden; background:linear-gradient(170deg,var(--main-color) 0,var(--main-color) 30%,var(--main-color) 65%,var(--main-color) 100%); color:#fff } .footer-deco-layer{ overflow:hidden; position:absolute; inset:0px; background-size:28px 28px; z-index:4; pointer-events:none } .footer-deco-layer::before{ content:""; position:absolute; top:-80px; right:-100px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(121,189,212,.16) 0,transparent 70%); animation:9s ease-in-out 0s infinite normal none running orbFloat } .footer-deco-layer::after{ content:""; position:absolute; bottom:-60px; left:-80px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(252,193,75,.12) 0,transparent 70%); animation:11s ease-in-out 0s infinite reverse none running orbFloat } @keyframes orbFloat{ 0%,100%{ transform:translate(0,0) scale(1) } 33%{ transform:translate(30px,-20px) scale(1.05) } 66%{ transform:translate(-15px,15px) scale(.96) } } .footer-travel-icons{ position:absolute; inset:0px; z-index:1; pointer-events:none; overflow:hidden } .footer-brand{ display:flex; flex-direction:column; gap:0 } .footer-logo{ display:flex; align-items:center; gap:.7rem; text-decoration:none } .footer-logo-text-brand{ font-size:1.5rem; font-weight:800; background:linear-gradient(135deg,#fcc14b,#fff) text; -webkit-text-fill-color:transparent } .footer-tagline{ font-size:.875rem; line-height:1.7; color:#fff; max-width:300px; margin-bottom:7px; margin-top:16px } .footer-contact{ display:flex; flex-direction:column; gap:.65rem; margin-top:.3rem } .footer-contact-item{ display:flex; align-items:center; gap:.65rem; font-size:.82rem; color:rgba(255,255,255,.58) } .footer-contact-icon{ width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.07); border:1px solid rgba(252,193,75,.18); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:.22s } .footer-contact-item:hover .footer-contact-icon{ background:rgba(252,193,75,.18); border-color:rgba(252,193,75,.4) } .footer-contact-icon svg{ width:14px; height:14px; stroke:rgb(252,193,75); fill:none; stroke-width:1.8 } .footer-col{ display:flex; flex-direction:column; gap:1rem } .footer-col-title{ font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--white-color); padding-bottom:.6rem; position:relative } .footer-col-title::after{ content:""; position:absolute; bottom:0; left:0; width:74px; height:2px; border-radius:2px; background:linear-gradient(90deg,#fcc14b,#a97b3a) } .footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:.55rem } .footer-col ul li a{ text-decoration:none; font-size:16px; font-weight:500; color:#fff; transition:.22s; display:flex; align-items:center; gap:.45rem } .footer-col ul li a::before{ content:""; width:5px; height:5px; border-radius:50%; background:#fcc14b; opacity:0; transition:opacity .22s; flex-shrink:0 } .footer-col ul li a:hover{ padding-left:.35rem; letter-spacing:3px; color:rgba(255,255,255,.9)!important } .footer-col ul li a:hover::before{ opacity:.8 } .footer-divider{ height:1px; background:linear-gradient(90deg,transparent,rgba(252,193,75,.22),rgba(121,189,212,.3),rgba(252,193,75,.22),transparent); margin-bottom:1rem } .footer-bottom{ display:flex; align-items:center; justify-content:space-around; flex-wrap:wrap; gap:1.2rem; margin-bottom:5px } .footer-copy{ font-size:16px; color:#fff; padding-left:17px } .footer-badge{ display:inline-flex; align-items:center; gap:.45rem; background:rgba(255,255,255,.05); border:1px solid rgba(252,193,75,.2); border-radius:100px; padding:.3rem .8rem; font-size:.72rem; font-weight:600; color:rgba(255,255,255,.48) } .footer-badge em{ color:#fcc14b; font-style:normal; font-size:.8rem } .footer-socials{ display:flex; gap:.7rem; align-items:center } .footer-social-link{ width:36px; height:36px; border-radius:10px; border:1px solid rgba(252,193,75,.18); background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.58); text-decoration:none; transition:.25s } .footer-social-link:hover{ background:rgba(252,193,75,.2); border-color:rgba(252,193,75,.45); color:#fcc14b; transform:translateY(-3px); box-shadow:rgba(252,193,75,.22) 0 8px 20px } .footer-social-link svg{ width:16px; height:16px; fill:currentcolor } .footer-logo img{ height:89px; width:211px } .contact-footer{ display:flex; flex-direction:column; gap:22px } .contact-footer a span{ text-decoration:none; font-size:16px; font-weight:500; color:#fff; transition:.22s } .contact-footer a span:hover{ color:rgba(255,255,255,.9); padding-left:.35rem; letter-spacing:3px } .footer-wave{ position:relative; z-index:1; margin-bottom:-2px; line-height:0 } .footer-wave svg{ display:block; width:100%; height:80px; transform:rotate(180deg) } .footer-inner{ position:relative; z-index:2; max-width:1300px; margin:0 auto; padding:4rem 2.5rem 2rem } .footer-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:2rem .5rem; margin-bottom:24px; padding-top:36px; padding-left:89px; padding-right:5px } .social-media-navbar{ gap:7px; align-items:center; display:flex!important; flex-direction:row!important } .social-media-navbar li a{ color:#212529; font-size:16px } .social-media-navbar li .facebook{ background-color:#1877f2; color:#fff; display:inline-block; border-radius:50%; border:2px solid rgba(33,37,41,0); text-align:center; width:36px; height:36px; line-height:33px; font-size:14px } .social-media-navbar li .facebook:hover{ background-color:#1877f2; color:#fff; transform:rotate(360deg) } .social-media-navbar li .google,.social-media-navbar li .google:hover{ background:conic-gradient( #4285F4 0deg 90deg, #34A853 90deg 180deg, #FBBC05 180deg 270deg, #EA4335 270deg 360deg ); color:#fff } .social-media-navbar li .google{ display:inline-block; border-radius:50%; border:2px solid #ddd; text-align:center; width:40px; height:40px; line-height:35px; font-size:17px } .social-media-navbar li .instgram,.social-media-navbar li .instgram:hover{ background:linear-gradient(45deg,#405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d); color:#fff } .social-media-navbar li .instgram{ display:inline-block; border-radius:50%; border:2px solid #ddd; text-align:center; width:40px; height:40px; line-height:35px; font-size:17px } .social-media-navbar li .linkedin,.social-media-navbar li .youtube,.social-media-navbar li .tripadvisor,.social-media-navbar li .twitter ,.social-media-navbar li .whatsapp ,.social-media-navbar li .google{ display:inline-block; width:36px; height:36px; line-height:33px; font-size:14px; color:#fff; text-align:center } .social-media-navbar li .instgram:hover{ transform:rotate(360deg) } .social-media-navbar li .google:hover{ transform:rotate(360deg) } .social-media-navbar li .linkedin{ background-color:#0a66c2; border-radius:50%; border:2px solid rgba(33,37,41,0) } .social-media-navbar li .tripadvisor,.social-media-navbar li .twitter{ border-radius:50% } .social-media-navbar li .linkedin:hover{ background-color:#0a66c2; color:#fff; transform:rotate(360deg) } .social-media-navbar li .twitter{ background-color:#1d9bf0; border:2px solid rgba(33,37,41,0) } .social-media-navbar li .twitter:hover{ background-color:#1d9bf0; color:#fff; transform:rotate(360deg) } .social-media-navbar li .tripadvisor{ background-color:#34e0a1; border:2px solid rgba(33,37,41,0) } .social-media-navbar li .tripadvisor:hover{ background-color:#34e0a1; color:#fff; transform:rotate(360deg) } .social-media-navbar li .youtube{ background-color:#e60023; border-radius:50%; border:2px solid rgba(33,37,41,0) } .social-media-navbar li .youtube:hover{ background-color:#e60023; color:#fff; transform:rotate(360deg) } .social-media-navbar li .whatsapp{ background-color:#2fa126; border-radius:50%; border:2px solid rgba(33,37,41,0) } .social-media-navbar li .whatsapp:hover{ background-color:#2fa126; color:#fff; transform:rotate(360deg) } .footer-col .TripadvisorReviews{ width:180px; height:auto } .footer-copy a{ color:#fff; font-size:20px; font-weight:600; text-decoration:underline } .footer-widget__logo{ display:inline-flex; margin-bottom:15px } .footer-widget__logo img{ filter:brightness(0) invert(1) opacity(.7) } .footer-widget--about p{ line-height:150%; color:#f9f0e9; margin:0 0 20px; width:60% } .newsletter_wrap form{ display:flex; align-items:center; justify-content:space-between; border:1px solid var(--white-color); border-radius:10px; padding:5px; width:550px } .newsletter_wrap img{ height:62px; width:358px } .newsletter_wrap form input{ width:100%; height:55px; border:unset; background:0 0; color:var(--white-color); padding-left:10px } .newsletter_wrap form .subscribe{ border-radius:10px; background:var(--third-color); text-wrap:nowrap; font-size:18px; font-weight:600; padding:8px 22px; color:#fff; border:none } .footer-deco{ padding-top:36px; padding-left:89px; padding-right:5px } .partners{ background:linear-gradient(180deg,#fdfcfb 0,#f7f4ef 100%); padding-top:37px } .partners__content{ padding-bottom:40px } .swiper-slide img{ height:114px; width:201px; object-fit:contain; transition:.2s; width:160px; max-height:68px; object-fit:contain; transition:.2s; } .swiper-horizontal{ touch-action:pan-y; padding-bottom:52px; padding-left:9px; padding-right:11px } .swiper-pagination-bullet{ width:24px; height:24px; display:flex; align-items:center; justify-content:center; margin:0 4px!important; background:0 0; border-radius:50%; cursor:pointer; position:relative } .swiper-pagination-bullet::after{ content:""; width:8px; height:8px; border-radius:50%; background:#b5b5b5; display:block } .swiper-pagination-bullet-active::after{ background:#0d6efd } .partners-pagination.swiper-pagination{ position:static; display:flex; align-items:center; justify-content:center; margin-top:20px; gap:6px } .partners-pagination .swiper-pagination-bullet{ width:24px; height:24px; display:flex; align-items:center; justify-content:center; margin:0 4px!important; background:0 0; border-radius:50%; cursor:pointer; position:relative } .partners-pagination .swiper-pagination-bullet::after{ content:""; width:8px; height:8px; border-radius:50%; background:#b5b5b5; display:block } .partners-pagination .swiper-pagination-bullet-active::after{ background:var(--second-color) } .swiper-slide img:hover{ } .faq-section{ padding:40px 0 40px; background:linear-gradient(180deg,#fdfcfb 0,#f7f4ef 100%); position:relative } .faq-section .tst-header{ text-align:center; margin-bottom:0 } .faq-section .tst-header .section-title{ color:var(--main-color); margin:12px 0 16px; font-size:clamp(28px, 4vw, 46px) } .faq-section .faq-intro__text{ color:rgba(43,52,128,.6); font-size:16px; max-width:560px; margin:0 auto; line-height:1.7 } .faq-layout{ display:grid; grid-template-columns:1.6fr 1fr; gap:74px; align-items:start; padding:30px 0 80px } @media (max-width:900px){ .faq-layout{ grid-template-columns:1fr; gap:40px; padding:0 } .faq-intro{ position:static; padding:0 } } .faq-icon{ color:var(--second-color); font-size:13px; flex-shrink:0; width:16px; opacity:.85 } .faq-intro{ position:sticky; top:100px; align-self:start } .faq-intro .section-title{ margin:10px 0 16px } .faq-intro__text{ color:rgba(43,52,128,.65); font-size:15px; line-height:1.75; margin-bottom:32px } .faq-cta-card{ background:linear-gradient(135deg,var(--main-color) 0,var(--main-color) 60%,var(--main-color) 100%); border-radius:24px; padding:36px; color:#fff; position:relative; overflow:hidden; box-shadow:0 20px 60px rgba(43,52,128,.35),0 0 0 1px rgba(245,166,35,.15) } .faq-cta-card::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.08) 1px,transparent 1px); background-size:22px 22px; pointer-events:none } .faq-cta-card::after{ content:''; position:absolute; bottom:-60px; left:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,rgba(174,137,79,.15) 0,transparent 70%); pointer-events:none } .faq-cta-card__icon{ width:52px; height:52px; border-radius:14px; background:rgba(245,166,35,.15); border:1px solid rgba(245,166,35,.3); display:grid; place-items:center; color:var(--third-color); font-size:22px; margin-bottom:20px; position:relative; z-index:1 } .faq-cta-card h3{ font-size:22px; color:#fff; margin:0 0 10px; line-height:1.25; position:relative; z-index:1 } .faq-cta-card p{ font-size:14px; color:rgba(255,255,255,.6); line-height:1.65; margin:0 0 24px; position:relative; z-index:1 } .faq-section .faq-box{ background:0 0; border:none; box-shadow:none } .faq-section .c4t-faq-grid{ display:flex; flex-direction:column; gap:0; border-left:2px solid rgba(43,52,128,.08) } .faq-section .faq-item{ background:0 0; border:none; border-radius:0; overflow:visible; position:relative; transition:all .3s ease } .faq-section .faq-item::before{ content:''; position:absolute; left:-7px; top:26px; width:12px; height:12px; border-radius:50%; background:#e8eaf6; border:2px solid rgba(43,52,128,.2); transition:all .3s ease; z-index:1 } .faq-section .faq-item.is-open::before{ background:var(--third-color); border-color:var(--third-color); box-shadow:0 0 0 4px rgba(245,166,35,.2); transform:scale(1.2) } .faq-section .faq-item:hover:not(.is-open)::before{ background:var(--main-color); border-color:var(--main-color) } .faq-section .faq-button{ width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:20px 0 20px 24px; border:0; background:0 0; cursor:pointer; text-align:left; font-size:15px; font-weight:600; color:var(--main-color); line-height:1.45; transition:all .25s ease } .faq-section .faq-button:hover{ color:var(--third-color); padding-left:32px } .faq-section .faq-item.is-open .faq-button{ color:var(--third-color); font-size:16px; padding-left:32px } .faq-section .faq-button span:first-child{ display:flex; align-items:flex-start; gap:10px } .faq-plus{ width:28px; height:28px; border-radius:8px; border:1.5px solid rgba(43,52,128,.2); background:0 0; display:grid; place-items:center; flex-shrink:0; transition:all .25s ease; position:relative; margin-top:1px } .faq-plus::after,.faq-plus::before{ content:''; position:absolute; background:var(--main-color); border-radius:2px; transition:all .25s ease } .faq-plus::before{ width:10px; height:2px } .faq-plus::after{ width:2px; height:10px } .faq-item.is-open .faq-plus{ background:var(--third-color); border-color:var(--third-color); border-radius:50%; transform:rotate(45deg) } .faq-item.is-open .faq-plus::after,.faq-item.is-open .faq-plus::before{ background:#fff } .faq-section .faq-answer{ display:none; padding:0 0 20px 56px; font-size:14.5px; color:rgba(43,52,128,.65); line-height:1.8; border-left:none } .faq-section .faq-item.is-open .faq-answer{ display:block; animation:slideDown .3s ease } @keyframes slideDown{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:translateY(0) } } .faq-section .c4t-faq-grid details{ display:none } .faq-layout .ornament{ display:flex; align-items:center; justify-content:start; gap:12px; margin-bottom:9px; color:var(--second-color) } .faq-item-hidden{ display:none!important } .faq-fade-in{ animation:slideDown .3s ease } .faq-btn-icon{ transition:transform .3s } .faq-btn-icon.rotated{ transform:rotate(180deg) } @keyframes fadeInFaq{ 0%{ opacity:0; transform:translateY(8px) } 100%{ opacity:1; transform:translateY(0) } } .c4t-faq-action{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:16px; justify-content:center; padding-left:24px } .c4t-faq-action .btn{ min-width:131px; padding:10px } .c4t-faq-action .btn:disabled{ opacity:.5; cursor:not-allowed } .faq-answer{ max-height:0; overflow:hidden; opacity:0; transition:.3s } .faq-item.is-open .faq-answer{ max-height:500px; opacity:1 } .from-inner{ display:flex; width:100%; align-items:center; border-radius:12px; border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); overflow:hidden; position:relative; z-index:1 } .from-inner input{ background:0 0; color:#fff; font-size:14px; width:100%; height:48px; border:none; padding:10px 16px; outline:0 } .from-inner input::placeholder{ color:rgba(255,255,255,.5) } .from-inner .theme-btn{ border-radius:8px; flex-shrink:0; margin:4px; white-space:nowrap } .faq-header-badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(43,52,128,.08); border:1px solid rgba(43,52,128,.15); border-radius:50px; padding:6px 16px; font-size:12px; font-weight:600; color:var(--main-color); margin-bottom:14px; letter-spacing:.5px; text-transform:uppercase } .faq-header-badge i{ font-size:13px; color:var(--third-color) } .testimonials-section .faq-header-badge{ background:rgba(245,166,35,.12); border-color:rgba(245,166,35,.25); color:rgba(255,255,255,.85) } .testimonials-section .faq-header-badge i{ color:var(--third-color) } .btn-style-three{ box-shadow:rgba(0,0,0,.1) 0 10px 30px; color:#fff; font-size:14px; font-weight:700; line-height:30px; position:relative; z-index:1; background:var(--third-color); overflow:hidden; padding:7px 39px 7px 18px; transition:.5s; border-radius:8px; text-align:center } .btn-style-three:hover{ color:var(--white-color); background-color:var(--third-color); border-color:var(--third-color) } .testimonials-section{ padding:30px 0 0; background:linear-gradient(180deg,#e7a84500,#2b348000); position:relative; overflow:hidden } .tst-bg-decor{ position:absolute; inset:0; background-image:radial-gradient(ellipse at 10% 20%,rgba(245,166,35,.18) 0,transparent 40%),radial-gradient(ellipse at 90% 80%,rgba(174,137,79,.15) 0,transparent 40%),radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.04) 0,transparent 60%); animation:meshPulse 12s ease-in-out infinite; pointer-events:none } @keyframes meshPulse{ 0%,100%{ opacity:.6; transform:scale(1) } 50%{ opacity:1; transform:scale(1.08) } } .testimonials-section::before{ content:''; position:absolute; width:500px; height:500px; border-radius:50%; border:1px solid rgb(245 166 35 / 13%); top:-200px; right:-150px; pointer-events:none } .testimonials-section::after{ content:''; position:absolute; width:300px; height:300px; border-radius:50%; border:1px solid rgba(245,166,35,.06); bottom:-100px; left:-80px; pointer-events:none } .tst-header{ text-align:center; margin-bottom:39px; position:relative } .tst-swiper{ padding-bottom:60px!important; padding-top:14px } .tst-swiper .swiper-wrapper{ align-items:stretch } .tst-card{ background:rgba(255,255,255,.06); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.1); border-left:3px solid var(--third-color); border-radius:20px; padding:30px 28px 24px; height:100%; display:flex; flex-direction:column; transition:all .4s cubic-bezier(.4, 0, .2, 1); position:relative; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.25) } .tst-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(245,166,35,.05) 0,transparent 60%); opacity:0; transition:opacity .4s ease; border-radius:inherit; pointer-events:none } .tst-card:hover{ transform:translateY(-8px); border-left-color:var(--second-color); border-color:rgba(245,166,35,.35); box-shadow:0 24px 64px rgba(0,0,0,.4),0 0 0 1px rgba(245,166,35,.2),inset 0 1px 0 rgba(255,255,255,.1); background:rgba(255,255,255,.1) } .tst-card:hover::after{ opacity:1 } .tst-card__quote{ font-size:15px; font-weight:700; color:var(--main-color); margin-bottom:10px; line-height:1.35; height:48px; } .tst-card__stars{ display:flex; gap:4px; margin-bottom:14px } .tst-card__stars i{ color:var(--third-color); font-size:13px; filter:drop-shadow(0 0 4px rgba(245, 166, 35, .6)) } .tst-card__text{ margin:0 0 10px; overflow:auto; font-size:15px; line-height:1.75; font-style:italic; height:138px } .tst-card__text p{ color:var(--muted); margin:0 } .tst-card__divider{ height:1px; background:linear-gradient(90deg,transparent,rgba(245,166,35,.4),transparent); margin-bottom:18px } .tst-card__author{ display:flex; align-items:center; gap:14px; margin-top:auto } .tst-avatar{ width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg,var(--third-color),var(--second-color)); color:#fff; font-weight:900; display:grid; place-items:center; flex-shrink:0; border:2px solid rgba(245,166,35,.4); overflow:hidden; box-shadow:0 0 0 4px rgba(245,166,35,.1); transition:transform .3s ease } .tst-card:hover .tst-avatar{ transform:scale(1.1); box-shadow:0 0 0 6px rgba(245,166,35,.15) } .tst-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50% } .tst-author-info{ flex:1 } .tst-author-info strong{ display:block; color:var(--main-color); font-size:14px; font-weight:700; margin-bottom:3px } .tst-author-info span{ font-size:12px; color:var(--main-color); display:flex; align-items:center; gap:5px } .tst-author-info span i{ color:var(--third-color); font-size:11px } .tst-platform{ width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.15); display:grid; place-items:center; color:rgba(255,255,255,.5); font-size:15px; flex-shrink:0 } .tst-ta-icon{ width:20px; height:20px } .tst-trust-item .tst-ta-icon{ width:24px; height:24px } .tst-nav{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:32px } .tst-btn-next,.tst-btn-prev{ width:46px; height:46px; border-radius:50%; border:1.5px solid rgba(245,166,35,.4); background:rgba(255,255,255,.07); color:rgba(255,255,255,.8); font-size:15px; display:grid; place-items:center; cursor:pointer; transition:all .25s ease; flex-shrink:0; backdrop-filter:blur(8px) } .tst-btn-next:hover,.tst-btn-prev:hover{ background:var(--third-color); border-color:var(--third-color); color:#1a1f4e; transform:scale(1.12); box-shadow:0 0 20px rgba(245,166,35,.4) } .tst-pagination.swiper-pagination{ position:static; display:flex; align-items:center; justify-content:center; gap:6px } .tst-pagination .swiper-pagination-bullet{ width:24px; height:24px; display:flex; align-items:center; justify-content:center; margin:0 4px!important; background:0 0; opacity:1; transition:.25s; position:relative } .tst-pagination .swiper-pagination-bullet::after{ content:""; width:8px; height:8px; border-radius:50%; background:rgb(44 53 126) } .tst-pagination .swiper-pagination-bullet-active::after{ background:var(--third-color); width:28px; border-radius:4px; box-shadow:0 0 8px rgba(245,166,35,.5) } .tst-trust-bar{ display:flex; align-items:center; justify-content:center; margin-top:0; padding:22px 36px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:16px; flex-wrap:wrap; gap:0; backdrop-filter:blur(10px) } .tst-trust-item{ display:flex; align-items:center; gap:10px; padding:0 32px; color:rgba(255,255,255,.75); font-size:14px } .tst-trust-item i{ font-size:22px; color:var(--third-color) } .tst-trust-sep{ width:1px; height:36px; background:rgba(255,255,255,.12) } .testimonials-section ::-webkit-scrollbar{ background:rgba(255,255,255,0); width:3px; height:0 } .gallery-section{ padding:40px 0 0; background:linear-gradient(180deg,#f8f6ff 0,#fff 100%); position:relative; overflow:hidden } .gallery-section::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(245,166,35,.15) 1px,transparent 1px); background-size:40px 40px; opacity:.4; pointer-events:none } .gallery-section::after{ content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%); width:600px; height:200px; background:radial-gradient(ellipse,rgba(245,166,35,.18) 0,transparent 70%); pointer-events:none } .gallery-badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(245,166,35,.15); border:1px solid rgba(245,166,35,.4); border-radius:50px; padding:6px 18px; font-size:12px; font-weight:700; color:var(--second-color); margin-bottom:14px; letter-spacing:1px; text-transform:uppercase } .gallery-badge i{ font-size:13px } .gallery-swiper{ padding-bottom:56px!important; position:relative } .gallery-item{ display:block; position:relative; border-radius:20px; overflow:hidden; cursor:zoom-in; aspect-ratio:4/3; text-decoration:none; box-shadow:0 4px 20px rgba(0,0,0,.35),0 0 0 1px rgba(245,166,35,.1); transition:box-shadow .35s ease,transform .35s ease } .gallery-item:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 16px 48px rgba(0,0,0,.5),0 0 0 2px rgba(245,166,35,.5) } .gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; max-height:-webkit-fill-available } .gallery-item:hover img{ transform:scale(1.08) } .gallery-overlay{ position:absolute; inset:0; background:linear-gradient(to top,rgba(13,21,53,.85) 0,rgba(13,21,53,.3) 50%,transparent 100%); display:flex; align-items:flex-end; padding:20px; opacity:0; transition:opacity .35s ease } .gallery-item:hover .gallery-overlay{ opacity:1 } .gallery-overlay__inner{ display:flex; align-items:center; gap:10px; color:#fff; transform:translateY(10px); transition:transform .35s ease } .gallery-item:hover .gallery-overlay__inner{ transform:translateY(0) } .gallery-overlay__inner i{ width:36px; height:36px; border-radius:50%; background:rgba(245,166,35,.9); display:grid; place-items:center; font-size:14px; flex-shrink:0; transition:none } .gallery-overlay__inner span{ font-size:15px; font-weight:700; letter-spacing:.02em; text-shadow:0 1px 4px rgba(0,0,0,.4) } .gallery-nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:8px } .gallery-btn-next,.gallery-btn-prev{ width:48px; height:48px; border-radius:50%; border:2px solid rgba(245,166,35,.5); background:rgba(245,166,35,.1); color:#212529; font-size:16px; display:grid; place-items:center; cursor:pointer; transition:background .25s,border-color .25s,transform .25s; flex-shrink:0; backdrop-filter:blur(4px) } .gallery-btn-next:hover,.gallery-btn-prev:hover{ background:var(--second-color); border-color:var(--second-color); transform:scale(1.1) } .gallery-pagination.swiper-pagination{ position:static; display:flex; align-items:center; justify-content:center; gap:6px } .gallery-pagination .swiper-pagination-bullet{ width:24px; height:24px; display:flex; align-items:center; justify-content:center; margin:0 4px!important; background:0 0; opacity:1; transition:background .25s,width .25s; position:relative } .gallery-pagination .swiper-pagination-bullet::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--main-color) } .gallery-pagination .swiper-pagination-bullet-active::after{ background:var(--second-color); width:28px; border-radius:4px } .lg-backdrop{ background:rgba(5,8,20,.97)!important } .lg-actions .lg-next,.lg-actions .lg-prev,.lg-toolbar{ background:rgba(245,166,35,.15)!important; border:1px solid rgba(245,166,35,.3)!important; border-radius:8px!important } .lg-counter{ color:rgba(255,255,255,.7)!important } @media (max-width:768px){ .gallery-section{ padding:60px 0 70px } .gallery-overlay{ opacity:1 } .gallery-overlay__inner{ transform:translateY(0) } } .blog-section{ padding:40px 0 14px; background:linear-gradient(180deg,#fff 0,#f7f5f0 100%); position:relative; padding:40px 0 52px } .blog-section .gallery-badge{ background:rgba(43,52,128,.08); border-color:rgba(43,52,128,.2); color:var(--main-color); margin-bottom:14px } .blog-section .gallery-badge i{ color:var(--main-color) } .blog-cards-grid{ display:grid; grid-template-columns:1fr 2fr; gap:24px; align-items:start } .blog-post-card--featured{ display:flex; flex-direction:column; background:#fff; border-radius:var(--radius-lg,22px); overflow:hidden; border:1px solid rgba(43,52,128,.08); box-shadow:0 4px 24px rgba(43,52,128,.07); text-decoration:none; color:inherit; height:100%; transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease } .blog-post-card--featured:hover{ transform:translateY(-6px); box-shadow:0 20px 56px rgba(43,52,128,.13); border-color:rgba(245,166,35,.4) } .blog-post-card--featured .blog-post-card__img{ position:relative; overflow:hidden; aspect-ratio:4/2 } .blog-post-card--featured .blog-post-card__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; padding:14px; border-radius:20px } .blog-post-card--featured:hover .blog-post-card__img img{ transform:scale(1.07) } .blog-post-card__body{ padding:0 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1 } .blog-post-card__title{ font-size:20px; font-weight:700; color:var(--main-color); line-height:1.35 } .blog-post-card__body p{ color:rgba(43,52,128,.6); margin:0 0 10px; overflow:auto; font-size:15px; line-height:1.75; font-style:italic; height:124px } .blog-tag{ display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:50px; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase } .blog-tag--float{ position:absolute; top:14px; left:14px; background:rgba(43,52,128,.82); color:#fff; backdrop-filter:blur(4px); z-index:2 } .blog-read-more-btn{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--second-color); margin-top:auto; padding-top:4px; text-decoration:none; transition:gap .25s ease } .blog-read-more-btn i{ font-size:11px; transition:transform .25s ease } .blog-post-card--featured:hover .blog-read-more-btn i,.blog-side-card:hover .blog-read-more-btn i{ transform:translateX(4px) } .blog-side-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px } .blog-side-card{ display:flex; gap:14px; align-items:flex-start; background:#fff; border-radius:var(--radius-md,16px); padding:14px; border:1px solid rgba(43,52,128,.08); box-shadow:0 2px 12px rgba(43,52,128,.05); text-decoration:none; color:inherit; transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease } .blog-side-card:hover{ transform:translateY(-5px); box-shadow:0 12px 36px rgba(43,52,128,.12); border-color:rgba(245,166,35,.4) } .blog-side-card__img{ width:149px; height:190px; border-radius:12px; overflow:hidden; flex-shrink:0 } .blog-side-card__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease } .blog-side-card:hover .blog-side-card__img img{ transform:scale(1.1) } .blog-side-card__body{ display:flex; flex-direction:column; gap:7px; flex:1; min-width:0 } .blog-side-card__title{ font-size:17px; font-weight:700; color:var(--main-color); line-height:1.35 } .blog-side-card__title:hover{ color:var(--second-color) } .blog-side-card__excerpt{ color:rgba(43,52,128,.6); margin:0 0 10px; overflow:auto; font-size:14px; line-height:1.75; font-style:italic; height:77px } .blog-cta{ text-align:center } .blog-view-all{ display:inline-flex; align-items:center; gap:10px; padding:14px 36px; border-radius:50px; background:var(--main-color); color:#fff; font-size:14px; font-weight:700; text-decoration:none; letter-spacing:.3px; transition:background .3s ease,transform .3s ease,box-shadow .3s ease; box-shadow:0 6px 24px rgba(43,52,128,.25) } .blog-view-all i{ font-size:12px; transition:transform .3s ease } .blog-view-all:hover{ background:var(--second-color); color:#fff; transform:translateY(-3px); box-shadow:0 12px 36px rgba(245,166,35,.35) } .blog-view-all:hover i{ transform:translateX(5px) } @media (max-width:992px){ .blog-cards-grid{ grid-template-columns:1fr } .blog-post-card--featured .blog-post-card__img{ aspect-ratio:16/7 } } @media (max-width:600px){ .blog-side-grid{ grid-template-columns:1fr } .blog-section{ padding:60px 0 70px } } .blog-section ::-webkit-scrollbar{ background:rgba(255,255,255,0); width:3px; height:0 } .tailor-banner{ background-color:var(--main-color); background-image:radial-gradient(ellipse at 20% 50%,rgba(39,61,127,.55) 0,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(107,206,245,.15) 0,transparent 55%); color:#fff; overflow:hidden; position:relative; border-radius:26px } .tailor-banner::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.08) 1px,transparent 1px); background-size:22px 22px; pointer-events:none } .tailor-banner::after{ content:''; position:absolute; top:0; left:0; width:60%; height:100%; background:linear-gradient(105deg,transparent 35%,rgba(242,183,5,.07) 50%,transparent 65%); animation:shimmer 5s ease-in-out infinite; pointer-events:none; will-change:transform } @keyframes shimmer{ 0%{ transform:translateX(-100%) } 60%{ transform:translateX(140%) } 100%{ transform:translateX(140%) } } .tailor-inner{ position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:36px 20px; display:flex; flex-direction:column; align-items:center; gap:28px; justify-content:space-between } @media (min-width:768px){ .tailor-inner{ flex-direction:row; align-items:center; padding:37px 0; gap:40px } } .tailor-img-wrap{ flex-shrink:0; position:relative; width:160px; order:-1 } @media (min-width:768px){ .tailor-img-wrap{ width:200px; order:0 } } @media (min-width:1024px){ .tailor-img-wrap{ width:230px } } .tailor-img-glow{ position:absolute; inset:-20px; background:radial-gradient(circle,rgba(107,206,245,.22) 0,transparent 70%); border-radius:50%; animation:glowPulse 3.5s ease-in-out infinite } @keyframes glowPulse{ 0%,100%{ transform:scale(1); opacity:.7 } 50%{ transform:scale(1.1); opacity:1 } } .tailor-img{ position:relative; z-index:1; width:100%; object-fit:contain; filter:drop-shadow(0 10px 28px rgba(0, 0, 0, .35)); animation:imgFloat 4.5s ease-in-out infinite } @keyframes imgFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } } .tailor-text{ flex:1; text-align:center } @media (min-width:768px){ .tailor-text{ text-align:left } } .tailor-eyebrow{ display:inline-flex; align-items:center; gap:7px; font-size:.7rem; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:var(--color-accent); margin-bottom:10px; opacity:0; animation:fadeUp .6s ease forwards .1s } @keyframes fadeUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:translateY(0) } } .tailor-title{ font-size:clamp(1.3rem, 3vw, 1.85rem); font-weight:700; color:var(--color-white); line-height:1.25; opacity:0; animation:fadeUp .6s ease forwards .22s } .tailor-title-accent{ color:var(--color-accent) } .tailor-sub{ margin-top:10px; font-size:.85rem; color:rgba(255,255,255,.68); line-height:1.7; max-width:420px; opacity:0; animation:fadeUp .6s ease forwards .34s } @media (max-width:767px){ .tailor-sub{ margin-left:auto; margin-right:auto } } .tailor-cta{ display:flex; flex-direction:column; align-items:center; gap:12px; flex-shrink:0; opacity:0; animation:fadeUp .6s ease forwards .46s } @media (min-width:768px){ .tailor-cta{ align-items:flex-end } } .btn-tailor-primary{ padding:12px 28px; border-radius:20px; background:var(--second-color); color:#fff; font-weight:700; font-size:.88rem; border:none; box-shadow:0 4px 18px rgba(242,183,5,.4); transition:background .25s,transform .2s,box-shadow .25s } .btn-tailor-primary:hover{ background:var(--second-color); transform:translateY(-2px); color:#fff!important } .btn-tailor-outline{ padding:11px 24px; border-radius:var(--radius-sm); background:0 0; color:var(--color-white); font-weight:600; font-size:.85rem; border:1.5px solid rgba(255,255,255,.35); transition:border-color .25s,background .25s,transform .2s } .btn-tailor-outline:hover{ border-color:var(--color-secondary); background:rgba(107,206,245,.1); transform:translateY(-2px) } .tailor-badges{ display:flex; align-items:center; gap:16px; margin-top:14px; flex-wrap:wrap; justify-content:center; opacity:0; animation:fadeUp .6s ease forwards .56s } @media (min-width:768px){ .tailor-badges{ justify-content:flex-start } } .mini-badge{ display:flex; align-items:center; gap:5px; font-size:16px; color:#ffc107 } .mini-badge-dot{ width:5px; height:5px; border-radius:50%; background:var(--color-accent) } .tailor-strip{ position:absolute; bottom:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,#1d2f66,#f2b705,#6bcef5,#1d2f66); background-size:200% 100%; animation:stripSlide 4s linear infinite } @keyframes stripSlide{ 0%{ background-position:0 0 } 100%{ background-position:200% 0 } } .services-section{ position:relative; padding:40px 0; overflow:hidden; background:linear-gradient(180deg,#f8f6ff 0,#fff 100%) } .section-header{ position:relative; z-index:2; text-align:center; margin-bottom:54px; padding:0 20px } .section-tag{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-bottom:12px } .section-tag span{ display:inline-block; width:30px; height:1.5px; background:var(--gold) } .section-title em{ font-style:normal; color:var(--main-color) } .section-desc{ font-size:15px; color:var(--para-color); max-width:500px; margin:0 auto; line-height:1.8 } .services-grid{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; max-width:1140px; margin:0 auto; padding:0 28px } .service-card{ background:#fff; border:1.5px solid #ffc107; border-radius:18px; padding:36px 30px 32px; position:relative; overflow:hidden; transition:transform .38s cubic-bezier(.34, 1.4, .64, 1),box-shadow .38s ease,border-color .3s ease } .service-card:hover{ transform:translateY(-10px); border-color:var(--blue-light); box-shadow:0 22px 55px rgba(26,110,189,.14),0 6px 18px rgba(26,110,189,.07) } .card-wave{ position:absolute; top:0; right:0; width:100%; height:120px; pointer-events:none; z-index:0 } .card-wave svg{ opacity:.25; transform:rotate(4deg) scale(1.1) } .service-card:hover .card-wave svg{ opacity:.5 } .icon-wrap{ width:76px; height:76px; border-radius:50%; background:linear-gradient(135deg,#fff9e6,#ffe9a0); display:flex; align-items:center; justify-content:center; margin-bottom:24px; position:relative; z-index:2; transition:background .35s ease,transform .4s cubic-bezier(.34, 1.56, .64, 1) } .icon-wrap::before{ content:''; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at center,rgba(255,249,230,.8) 0,transparent 70%); opacity:0; transition:opacity .35s ease } .service-card:hover .icon-wrap::before{ opacity:1; animation:sunNeon 2.2s ease-in-out infinite } .icon-wrap img{ width:38px; height:38px; object-fit:contain; filter:invert(28%) sepia(85%) saturate(650%) hue-rotate(193deg) brightness(.92); transition:filter .35s ease,transform .4s cubic-bezier(.34, 1.56, .64, 1) } .service-card:hover .icon-wrap{ background-size:cover; transform:scale(1.1) rotate(-3deg); z-index:0 } @keyframes sunNeon{ 0%,100%{ filter:drop-shadow(0 0 3px rgba(245, 166, 35, .5)) drop-shadow(0 0 8px rgba(245, 166, 35, .3)) } 50%{ filter:drop-shadow(0 0 8px rgba(245, 166, 35, 1)) drop-shadow(0 0 20px rgba(245, 166, 35, .75)) drop-shadow(0 0 38px rgba(255, 200, 50, .4)) } } .service-card:hover .icon-wrap img{ filter:invert(58%) sepia(82%) saturate(750%) hue-rotate(8deg) brightness(.95); transform:scale(1.08) } .card-title{ font-size:20px; font-weight:700; color:var(--second-color); margin-bottom:11px; position:relative; z-index:2; transition:color .3s ease } .service-card:hover .card-title{ color:var(--main-color) } .card-desc{ font-size:14px; color:var(--para-color); line-height:1.75; margin-bottom:20px; position:relative; z-index:2 } .card-list{ list-style:none; border-top:1.5px dashed #d9e8f5; padding-top:16px; display:flex; flex-direction:column; gap:10px; position:relative; z-index:2 } .card-list li{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text-body) } .card-list li::before{ content:''; width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--blue-light); border:2px solid var(--blue-mid); transition:background .3s ease,border-color .3s ease,transform .3s ease } .service-card:hover .card-list li::before{ background:var(--gold); border-color:var(--gold-dark); transform:scale(1.25) } .bottom-wave{ position:relative; margin-top:80px; line-height:0 } .bottom-wave svg{ display:block; width:100% } .wave-cta{ background:var(--blue-light); text-align:center; padding:30px 20px 48px } .wave-cta p{ font-size:15px; color:var(--second-color); font-weight:500; margin-bottom:14px } .wave-cta a{ display:inline-block; background:var(--main-color); color:#fff; font-size:14px; font-weight:600; padding:13px 36px; border-radius:50px; text-decoration:none; box-shadow:0 6px 22px rgba(26,110,189,.3); transition:background .3s ease,transform .3s ease } .wave-cta a:hover{ background:var(--second-color); transform:translateY(-2px) } @media(max-width:900px){ .services-grid{ grid-template-columns:repeat(2,1fr) } } @media(max-width:560px){ .navbar.top{ background:rgba(255,255,255,.12); backdrop-filter:blur(20px) saturate(180%) } .services-grid{ grid-template-columns:1fr; padding:0 16px } .service-card{ padding:28px 22px } .video-banner{ height:60vh; min-height:60vh; padding-top:150px } } .destinations-section{ padding:80px 0; background:linear-gradient(180deg,#fdfcfb 0,#f7f4ef 100%) } .dest-tours-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px } .dest-tour-card{ display:flex; flex-direction:column; background:#fff; border-radius:var(--radius-lg,22px); overflow:hidden; text-decoration:none; color:inherit; border:1px solid rgba(7,55,99,.07); box-shadow:0 2px 20px rgba(7,55,99,.06); transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease } .dest-tour-card:hover{ transform:translateY(-10px); box-shadow:0 20px 56px rgba(7,55,99,.14); border-color:rgba(245,166,35,.4) } .dest-tour-card__img{ position:relative; overflow:hidden; aspect-ratio:4/2 } .dest-tour-card__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; padding:8px; border-radius:16px } .dest-tour-card:hover .dest-tour-card__img img{ transform:scale(1.08) } .dest-tour-badge{ position:absolute; top:20px; left:-2px; z-index:2; border-radius:8px; padding:5px 12px; font-size:12px; font-weight:700; letter-spacing:.3px } .dest-tour-badge--days{ background:rgba(7,55,99,.85); color:#fff; border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(6px) } .dest-tour-card__img-footer{ display:flex; align-items:center; justify-content:space-between; padding:10px 16px 12px } .dest-tour-price{ font-size:20px; font-weight:800; color:var(--main-color); text-decoration:underline; text-underline-offset:5px } .dest-tour-explore{ font-size:13px; font-weight:700; color:var(--main-color); display:flex; align-items:center; gap:6px; transition:color .25s ease,gap .25s ease } .dest-tour-explore i{ font-size:11px; transition:transform .25s ease } .dest-tour-card:hover .dest-tour-explore{ color:var(--second-color); gap:10px } .dest-tour-card:hover .dest-tour-explore i{ transform:translateX(3px) } .dest-tour-card__body{ padding:0 14px 6px; display:flex; flex-direction:column; gap:10px; flex:1 } .dest-tour-card__title{ font-size:17px; font-weight:700; color:var(--main-color); line-height:1.35; margin:0; transition:color .25s ease; -webkit-transition:color .25s ease; -moz-transition:color .25s ease; -ms-transition:color .25s ease; -o-transition:color .25s ease; height:45px; } .dest-tour-card:hover .dest-tour-card__title{ color:var(--second-color) } .dest-tour-card__excerpt{ font-size:13.5px; line-height:1.7; color:rgba(7,55,99,.6); display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin:0 } @media (max-width:992px){ .dest-tours-grid{ grid-template-columns:repeat(2,1fr); gap:20px } } @media (max-width:576px){ .dest-tours-grid{ grid-template-columns:1fr } .destinations-section{ padding:60px 0 70px } } .tours-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px } .tour-card{ background:#fff; border-radius:24px; overflow:hidden; box-shadow:rgba(0,0,0,.05) 0 10px 30px; transition:.3s } .tour-card:hover{ transform:translateY(-8px) } .tour-image{ position:relative; height:250px; overflow:hidden; padding:0 } .tour-image img{ width:100%; height:100%; object-fit:cover; transition:.5s; border-radius:26px } .tour-card:hover img{ transform:scale(1.08) } .badge{ position:absolute; top:20px; left:-4px; background:#c79a42; color:#fff; padding:8px 14px; border-radius:7px; font-size:12px } .tour-content{ padding:10px 15px 16px 17px } .tour-meta{ display:flex; justify-content:space-between; margin-top:12px; color:var(--main-color); font-size:14px; border-top:1px dashed; padding-top:9px } .tour-content h3{ color:#163b5b; margin-bottom:15px; line-height:1.4; height:63px; } .tour-content p{ color:#666; margin-bottom:0; font-size:14px; line-height:1.7; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-align:start } .tour-footer{ display:flex; justify-content:space-between; align-items:center; border-top:1px dashed var(--line); padding-top:10px } .price strong{ color:var(--gold); font-size:24px } .tour-footer a{ text-decoration:none; color:#163b5b; font-weight:600 } @media (max-width:991px){ .tours-grid{ grid-template-columns:repeat(2,1fr) } } @media (max-width:767px){ .tours-grid{ grid-template-columns:1fr } .section-title h2{ font-size:32px } } .old-price{ color:var(--second-color); font-size:21px; text-decoration:line-through; opacity:.6 } .tour-meta i{ color:var(--third-color) } .why-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--second-color); margin-bottom:10px } .why-eyebrow .eyebrow-line{ display:inline-block; width:28px; height:2px; background:var(--second-color); border-radius:2px } .why-cards-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding-bottom:20px } .why-card{ background:#fff; border-radius:var(--radius-lg); border:1px solid rgba(7,55,99,.08); box-shadow:0 4px 24px rgba(7,55,99,.06); padding:32px 28px 24px; display:flex; flex-direction:column; gap:16px; position:relative; overflow:hidden; transition:transform .35s cubic-bezier(.34,1.4,.64,1),box-shadow .35s ease,border-color .3s ease } .why-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--main-color),var(--second-color)); opacity:0; transition:opacity .3s ease } .why-card:hover{ transform:translateY(-8px); box-shadow:0 20px 50px rgba(7,55,99,.13); border-color:rgba(245,166,35,.35) } .why-card:hover::before{ opacity:1 } .why-card__icon-wrap{ width:64px; height:64px; border-radius:16px; background:linear-gradient(135deg,rgba(7,55,99,.07) 0,rgba(7,55,99,.03) 100%); border:1px solid rgba(7,55,99,.1); display:flex; align-items:center; justify-content:center; font-size:26px; color:var(--main-color); transition:background .3s ease,color .3s ease,transform .4s cubic-bezier(.34,1.56,.64,1); flex-shrink:0; margin-bottom:5px; } .why-card:hover .why-card__icon-wrap{ background:linear-gradient(135deg,var(--main-color),#0a4a73); color:#fff; border-color:transparent; transform:scale(1.1) rotate(-4deg) } .why-card__icon-wrap svg{ color:#0a4a73; fill: #0a4a73; } .why-card:hover .why-card__icon-wrap svg{ color:#f6f7f8; fill: #dfe4e7; } .why-card__title{ font-size:18px; font-weight:700; color:var(--main-color); line-height:1.3; margin:0; transition:color .25s ease } .why-card:hover .why-card__title{ color:var(--second-color) } .why-card__desc{ font-size:14px; line-height:1.75; color:rgba(46,51,62,.75); margin:0 } .why-card__footer{ border-top:1px dashed rgba(7,55,99,.12); padding-top:14px } .why-card__badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.5px; color:var(--main-color); background:rgba(7,55,99,.06); border:1px solid rgba(7,55,99,.1); border-radius:100px; padding:5px 12px; transition:background .3s ease,color .3s ease,border-color .3s ease } .why-card:hover .why-card__badge{ background:rgba(245,166,35,.1); color:var(--second-color); border-color:rgba(245,166,35,.3) } .why-card__badge i{ font-size:10px } @media (max-width:992px){ .why-cards-grid{ grid-template-columns:repeat(2,1fr) } } @media (max-width:576px){ .why-cards-grid{ grid-template-columns:1fr; gap:16px } .why-card{ padding:24px 20px 20px } } .tours-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px } .tour-card{ background:#fff; border-radius:24px; overflow:hidden; box-shadow:rgba(0,0,0,.05) 0 10px 30px; transition:.3s } .tour-card:hover{ transform:translateY(-8px) } .tour-image{ position:relative; height:250px; overflow:hidden; padding:0 } .tour-image img{ width:100%; height:100%; object-fit:cover; transition:.5s; border-radius:30px } .tour-card:hover img{ transform:scale(1.08) } .badge{ position:absolute; top:15px; left:-1px; background:#c79a42; color:#fff; padding:8px 14px; border-radius:3px; font-size:12px } .tour-content{ padding:10px 15px 16px 17px } .tour-meta{ display:flex; justify-content:space-between; margin-bottom:15px; color:#777; font-size:14px } .tour-content h3{ color:#163b5b; margin-bottom:15px; line-height:1.4; } .tour-content p{ color:#666; margin-bottom:0; font-size:14px; line-height:1.7; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-align:start } .tour-footer{ display:flex; justify-content:space-between; align-items:center; border-top:1px dashed var(--line); padding-top:10px } .price strong{ color:var(--gold); font-size:24px } .tour-footer a{ text-decoration:none; color:#163b5b; font-weight:600 } @media (max-width:991px){ .tours-grid{ grid-template-columns:repeat(2,1fr) } } @media (max-width:767px){ .tours-grid{ grid-template-columns:1fr } .section-title h2{ font-size:32px } } .featured-tours-section{ padding:40px 0 0; background:linear-gradient(180deg,#fff 0,#f7f4ef 100%) } .ft-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:48px } .ft-card{ display:flex; flex-direction:column; border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:inherit; background:#fff; border:1px solid rgba(7,55,99,.07); box-shadow:0 4px 20px rgba(7,55,99,.06); transition:transform .35s cubic-bezier(.34,1.4,.64,1),box-shadow .35s ease } .ft-card:hover{ transform:translateY(-8px); box-shadow:0 20px 50px rgba(7,55,99,.14); color:inherit } .ft-card__img{ position:relative; overflow:hidden; aspect-ratio:4/2 } .ft-card__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; padding:8px; border-radius:26px } .ft-card:hover .ft-card__img img{ transform:scale(1.08) } .ft-price{ position:absolute; top:14px; left:14px; background:var(--main-color); color:#fff; font-size:13px; font-weight:700; padding:5px 13px; border-radius:8px; letter-spacing:.3px; z-index:2; box-shadow:0 4px 12px rgba(7,55,99,.3) } .ft-card__body{ padding:0 16px 16px; display:flex; flex-direction:column; gap:10px; flex:1 } .ft-card__title{ font-size:17px; font-weight:700; color:var(--main-color); line-height:1.45; margin:0; height:50px } .ft-card:hover .ft-card__title{ color:var(--second-color) } .ft-card__link{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--main-color); margin-top:auto; transition:gap .25s ease,color .25s ease } .ft-card__link i{ font-size:11px; transition:transform .25s ease } .ft-card:hover .ft-card__link{ color:var(--second-color); gap:10px } .ft-card:hover .ft-card__link i{ transform:translateX(3px) } .ft-cta{ text-align:center } .ft-cta__btn{ display:inline-flex; align-items:center; gap:8px; background:var(--main-color); color:#fff; font-size:14px; font-weight:700; padding:13px 36px; border-radius:100px; text-decoration:none; transition:background .3s ease,transform .3s ease,box-shadow .3s ease; box-shadow:0 6px 22px rgba(7,55,99,.25) } .ft-cta__btn:hover{ background:var(--second-color); color:#fff; transform:translateY(-3px); box-shadow:0 12px 32px rgba(245,166,35,.35) } .ft-cta__btn i{ font-size:12px; transition:transform .25s ease } .ft-cta__btn:hover i{ transform:translateX(4px) } @media (max-width:1100px){ .ft-grid{ grid-template-columns:repeat(3,1fr) } } @media (max-width:768px){ .ft-grid{ grid-template-columns:repeat(2,1fr); gap:14px } } @media (max-width:480px){ .ft-grid{ grid-template-columns:1fr } } .section-heading{ display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:50px } .subtitle{ color:#f5a623; font-weight:600; letter-spacing:1px; text-transform:uppercase; display:block; margin-bottom:12px } .section-heading h2{ font-size:42px; color:#153b66; margin-bottom:15px } .section-heading p{ color:#666; max-width:700px; line-height:1.8 } .view-all-btn{ padding:14px 28px; border-radius:50px; text-decoration:none; background:#153b66; color:#fff; transition:.3s } .view-all-btn:hover{ background:#f5a623; color:#153b66 } .destination-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; grid-auto-rows:250px; gap:20px } .card{ position:relative; overflow:hidden; border-radius:26px } .card img{ width:100%; height:100%; object-fit:cover; transition:.6s } .card::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent,rgba(0,0,0,.75)) } .egypt{ grid-row:span 2 } .wide{ grid-column:span 2 } .content{ position:absolute; left:25px; bottom:25px; z-index:2; color:#fff } .content span{ display:inline-block; padding:8px 15px; border-radius:30px; background:rgba(255,255,255,.15); backdrop-filter:blur(8px); margin-bottom:15px; font-size:14px } .content h3{ font-size:34px; margin-bottom:8px } .content p{ opacity:.9 } .card:hover img{ transform:scale(1.08) } .card:hover{ transform:translateY(-6px); transition:.4s; box-shadow:0 25px 45px rgba(0,0,0,.15) } .dest-grid-modern{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:240px; gap:18px; margin-bottom:48px } .dest-card{ position:relative; overflow:hidden; border-radius:var(--radius-lg); text-decoration:none; color:#fff; display:flex; align-items:flex-end; transition:transform .35s cubic-bezier(.34,1.4,.64,1),box-shadow .35s ease; box-shadow:0 4px 24px rgba(7,55,99,.1) } .dest-card:hover{ transform:translateY(-8px); box-shadow:0 20px 50px rgba(7,55,99,.18); color:#fff } .dest-card--large{ grid-row:span 2; grid-column:span 3 } .dest-card--wide{ grid-column:span 3 } .dest-card--medium{ grid-column:span 2 } .dest-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transition:transform .6s ease } .dest-card:hover img{ transform:scale(1.08) } .dest-card__overlay{ position:absolute; inset:0; z-index:2; background:linear-gradient(180deg,rgba(7,55,99,0) 0,rgba(7,55,99,.4) 40%,rgb(7 55 99 / 38%) 100%); transition:opacity .35s ease } .dest-card:hover .dest-card__overlay{ background:linear-gradient(180deg,rgba(7,55,99,.1) 0,rgba(7,55,99,.6) 50%,rgba(7,55,99,.95) 100%) } .dest-card__content{ position:relative; z-index:3; padding:24px; width:100%; display:flex; flex-direction:column; gap:8px } .dest-card--large .dest-card__content{ padding:32px; gap:12px } .dest-card__badge{ display:inline-flex; align-items:center; gap:6px; width:max-content; background:rgba(255,255,255,.18); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.25); border-radius:100px; padding:6px 14px; font-size:12px; font-weight:700; color:#fff; letter-spacing:.5px; transition:background .3s ease,border-color .3s ease } .dest-card:hover .dest-card__badge{ background:rgba(245,166,35,.9); border-color:#f5a623 } .dest-card__badge i{ font-size:10px } .dest-card__title{ font-size:26px; font-weight:700; color:#fff; margin:0; line-height:1.2; transition:color .25s ease } .dest-card--large .dest-card__title{ font-size:38px } .dest-card:hover .dest-card__title{ color:var(--second-color) } .dest-card__desc{ font-size:14px; color:rgba(255,255,255,.88); line-height:1.5; margin:0; opacity:0; transform:translateY(10px); transition:opacity .35s ease,transform .35s ease } .dest-card--large .dest-card__desc{ font-size:15px; opacity:1; transform:translateY(0) } .dest-card:hover .dest-card__desc{ opacity:1; transform:translateY(0) } .dest-card__cta{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#fff; margin-top:8px; opacity:0; transform:translateY(10px); transition:opacity .35s ease .1s,transform .35s ease .1s,gap .25s ease } .dest-card--large .dest-card__cta{ opacity:1; transform:translateY(0) } .dest-card:hover .dest-card__cta{ opacity:1; transform:translateY(0); gap:12px } .dest-card__cta i{ font-size:11px; transition:transform .25s ease } .dest-card:hover .dest-card__cta i{ transform:translateX(4px) } .dest-view-all{ text-align:center } .dest-view-all__btn{ display:inline-flex; align-items:center; gap:8px; background:var(--main-color); color:#fff; font-size:14px; font-weight:700; padding:14px 38px; border-radius:100px; text-decoration:none; transition:background .3s ease,transform .3s ease,box-shadow .3s ease; box-shadow:0 6px 24px rgba(7,55,99,.25) } .dest-view-all__btn:hover{ background:var(--second-color); color:#fff; transform:translateY(-3px); box-shadow:0 12px 36px rgba(245,166,35,.35) } .dest-view-all__btn i{ font-size:12px; transition:transform .25s ease } .dest-view-all__btn:hover i{ transform:translateX(5px) } @media (max-width:1024px){ .dest-grid-modern{ grid-template-columns:repeat(4,1fr); grid-auto-rows:220px } .dest-card--large{ grid-column:span 2; grid-row:span 2 } .dest-card--wide{ grid-column:span 2 } .dest-grid-modern .dest-card:nth-child(5),.dest-grid-modern .dest-card:nth-child(6){ grid-column:span 2 } } @media (max-width:768px){ .dest-grid-modern{ grid-template-columns:repeat(2,1fr); grid-auto-rows:200px; gap:14px } .dest-card--large{ grid-column:span 2; grid-row:span 1 } .dest-card--wide{ grid-column:span 2 } .dest-grid-modern .dest-card:nth-child(5),.dest-grid-modern .dest-card:nth-child(6){ grid-column:span 1 } .dest-card__title{ font-size:22px } .dest-card--large .dest-card__title{ font-size:28px } } @media (max-width:480px){ .dest-card--large,.dest-card--wide{ grid-column:span 1; grid-row:span 1 } .dest-grid-modern .dest-card:nth-child(5),.dest-grid-modern .dest-card:nth-child(6){ grid-column:span 1 } } .dest-grid-modern .dest-card:nth-child(5),.dest-grid-modern .dest-card:nth-child(6){ grid-column:span 2 } .dest-grid-modern .dest-card:nth-child(6){ grid-column:span 1 } .destinations-section{ padding:80px 0; background:linear-gradient(180deg,#fdfcfb 0,#f7f4ef 100%) } .hero-img-wrap img{ height:100%; -o-object-fit:cover; object-fit:cover; width:100% } .hero-home{ margin:0 28px; position:relative; height:70vh; min-height:560px; max-height:860px; overflow:hidden; border:1px solid var(--gold); z-index:0; padding:14px; border-radius:20px } .hero-info{ height:100%; position:relative; overflow:hidden; border-radius:20px } .hero-img-wrap{ position:absolute; inset:0px; z-index:0; overflow:hidden; border-radius:20px; cursor:pointer } .hero-info::before{ content:""; position:absolute; inset:0px; z-index:3; pointer-events:none } .hero-dots{ position:absolute; inset:0px; background-image:radial-gradient(circle,rgba(255,255,255,.08) 1px,rgba(18,57,91,.11) 1px); background-size:28px 28px; z-index:4; pointer-events:none } .slide-description{ position:absolute; inset:0px; z-index:5; display:flex; flex-direction:column; align-items:center; padding:1rem 1rem 1rem 4rem; max-width:100%; justify-content:center } @media (max-width:768px){ .slide-description{ align-items:center; text-align:center; padding:1rem .5rem; max-width:100% } } .slide-description h1{ font-size:40px; font-weight:800; color:var(--white-color); line-height:1.15; margin-bottom:14px; text-shadow:rgba(0,0,0,.4) 0 2px 20px } .slide-description p{ font-size:clamp(.9rem, 2vw, 1.1rem); color:rgba(255,255,255,.78); line-height:1.72; max-width:480px; margin-bottom:0 } @media (max-width:576px){ .hero-home{ height:70vh; min-height:420px; margin:0 } } .hero-search-section{ position:relative; margin-top:-50px; z-index:10; padding:0 28px 20px } .hero-search-wrapper{ display:flex; justify-content:center } .hero-search-box{ width:100%; max-width:1200px; background:rgba(255,255,255,.95); backdrop-filter:blur(10px); border-radius:var(--radius-xl); box-shadow:0 20px 60px rgba(6,29,53,.15); padding:35px 40px; position:relative; border:1px solid rgba(245,166,35,.1) } .search-form{ width:100% } .search-form-grid{ display:flex; width:100%; gap:24px; align-items:flex-end } .search-form-item{ display:flex; flex-direction:column; gap:10px; flex:1; min-width:0 } .search-label{ font-size:14px; font-weight:700; color:var(--main-color); text-transform:capitalize; letter-spacing:.3px; display:flex; align-items:center; gap:8px } .search-label i{ color:var(--second-color); font-size:16px } .search-field{ width:100%; height:55px; padding:0 18px; border:2px solid rgba(7,55,99,.12); border-radius:var(--radius-md); font-size:15px; font-weight:500; color:var(--main-color); background:#fff; transition:all .3s ease; cursor:pointer; appearance:none; background-repeat:no-repeat; background-position:right 16px center; padding-right:40px } .search-field:focus{ outline:0; border-color:var(--second-color); box-shadow:rgba(245,166,35,.15) 0 0 0 4px; } .search-field:hover{ border-color:rgba(7,55,99,.25) } .search-btn-item{ flex:0 0 auto } .hero-search-btn{ width:100%; height:55px; padding:0 32px; background:linear-gradient(135deg,var(--main-color) 0,var(--main-color) 100%); color:var(--white-color); border:none; border-radius:var(--radius-md); font-size:16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:12px; transition:all .3s ease; box-shadow:0 4px 15px rgba(7,55,99,.2) } .hero-search-btn:hover{ background:linear-gradient(135deg,var(--second-color) 0,var(--second-color) 100%); color:var(--main-color); transform:translateY(-3px); box-shadow:0 8px 25px rgba(245,166,35,.4) } .hero-search-btn:active{ transform:translateY(-1px) } .hero-search-btn i{ font-size:18px; transition:transform .3s ease } .hero-search-btn:hover i{ transform:scale(1.1) } @media (max-width:1200px){ .search-form-grid{ gap:20px } .hero-search-box{ padding:30px 35px } } @media (max-width:992px){ .search-form-grid{ gap:18px } .hero-search-section{ margin-top:-40px; padding:0 20px 30px } .hero-search-box{ padding:25px 30px } .hero-search-btn,.search-field{ height:50px } } @media (max-width:768px){ .search-form-grid{ flex-direction:column; align-items:stretch; gap:16px } .hero-search-section{ margin-top:-30px; padding:0 15px 25px } .hero-search-box{ padding:20px } .hero-search-btn,.search-field{ height:48px } .search-label{ font-size:13px } } @media (max-width:576px){ .hero-search-section{ margin-top:-25px; padding:0 10px 20px } .hero-search-box{ padding:18px; border-radius:var(--radius-lg) } .hero-search-btn,.search-field{ height:45px; font-size:14px } .hero-search-btn{ padding:0 24px } } .top-bar{ background:rgba(7,55,99,.9); padding:8px 0; position:relative; overflow:visible; z-index:999999999; border-bottom:1px solid rgba(255,255,255,.1) } .Language-box,.currency-box{ position:relative; z-index:999999999999999!important } .Language-box .dropdown-menu,.currency-box .dropdown-menu{ z-index:9999999999999999!important } .Language-box .dropdown,.currency-box .dropdown{ position:relative } .top-bar::after{ content:""; position:absolute; inset:0px; background:linear-gradient(90deg,transparent 0,rgba(245,166,35,.08) 50%,transparent 100%); pointer-events:none } .top-bar-inner{ max-width:1400px; margin:0 auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; position:relative; z-index:1; overflow:visible } .top-contacts{ display:none; align-items:center; gap:0 } @media (min-width:768px){ .top-contacts{ display:flex } } .top-contacts li{ display:flex; align-items:center; gap:8px; padding:0 20px; position:relative; font-size:13px; font-weight:500 } .top-contacts li+li::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); height:16px; width:1px; background:rgba(255,255,255,.15) } .top-contacts li i{ color:var(--second-color); font-size:13px } .top-contacts li a{ color:rgba(255,255,255,.8); transition:color .2s; text-decoration:none } .top-contacts li a:hover{ color:var(--second-color) } .top-right{ display:flex; align-items:center; gap:12px; margin-left:auto } .top-dropdown{ position:relative } .top-dropdown-btn{ display:flex; align-items:center; gap:6px; padding:5px 12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-sm); color:rgba(255,255,255,.85); font-size:13px; font-weight:500; transition:all .3s ease; cursor:pointer } .top-dropdown-btn i{ color:var(--second-color); font-size:13px } .top-dropdown-btn .chevron{ font-size:9px; color:rgba(255,255,255,.5); transition:transform .25s } .top-dropdown:hover .top-dropdown-btn{ background:rgba(255,255,255,.1); border-color:var(--second-color); color:var(--white-color) } .top-dropdown:hover .chevron{ transform:rotate(180deg) } .top-dropdown-menu{ position:absolute; top:calc(100% + 8px); left:0; min-width:140px; background:var(--main-color); border-radius:var(--radius-md); box-shadow:0 10px 40px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.1); overflow:hidden; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .3s,transform .3s,visibility .3s; z-index:200 } .top-dropdown:hover .top-dropdown-menu{ opacity:1; visibility:visible; transform:translateY(0) } .top-dropdown-menu a{ display:flex; align-items:center; gap:10px; padding:10px 14px; font-size:13px; font-weight:500; color:rgba(255,255,255,.85); border-bottom:1px solid rgba(255,255,255,.05); transition:background .2s,color .2s } .top-dropdown-menu a:last-child{ border-bottom-width:medium; border-bottom-style:none; border-bottom-color:currentcolor } .top-dropdown-menu a:hover{ background:rgba(255,255,255,.1); color:var(--white-color) } .top-dropdown-menu img{ width:20px; height:14px; border-radius:2px; object-fit:cover } .navbar{ background:#fff; position:sticky; top:0; transition:all .4s cubic-bezier(.4, 0, .2, 1); border:1px solid rgba(7,55,99,.08); border-radius:0; box-shadow:rgba(0,0,0,.1) 0 0 50px 0; background:#fff; overflow:visible; border-radius:20px } .nav-bar{ background:#fff; position:sticky; top:0; z-index:99; transition:all .4s cubic-bezier(.4, 0, .2, 1); border:1px solid rgba(7,55,99,.08); border-radius:0; box-shadow:rgba(0,0,0,.1) 0 0 50px 0; background:#fff; overflow:visible; border-radius:20px; border-radius:0 0 24px 24px } .nav-bar.scrolled{ background:rgba(255,255,255,.98); box-shadow:0 4px 30px rgba(7,55,99,.1); position:fixed!important; top:0!important; width:100%!important; z-index:9999999999999!important; border-radius:0 } .nav-inner{ max-width:1400px; margin:0 auto; padding:0 32px; display:flex; align-items:center; height:80px; background:0 0; border-radius:0; margin-top:0 } .nav-logo-wrap{ display:flex; align-items:center; position:relative; padding-right:40px; flex-shrink:0; background:0 0; padding:0; border-radius:0; margin:0 } .nav-logo-wrap::after{ content:""; position:absolute; right:20px; top:50%; transform:translateY(-50%); width:1px; height:30px; background:rgba(7,55,99,.1); border-radius:2px } .logo-box img{ width:150px; height:auto; filter:none } .nav-links{ display:none; align-items:center; margin:0 auto; gap:8px; padding:0 } @media (min-width:1024px){ .nav-links{ display:flex } } .nav-item{ position:relative; display:flex; align-items:center } .nav-link{ display:flex; align-items:center; gap:6px; padding:10px 0px; font-size:15px; font-weight:600; color:var(--main-color); position:relative; transition:all .3s ease; white-space:nowrap; border-radius:var(--radius-md); background:0 0; letter-spacing:.2px } .nav-link::before{ content:""; position:absolute; inset:0; background:rgba(7,55,99,.05); border-radius:var(--radius-md); opacity:0; transition:opacity .3s ease } .nav-link::after{ content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%) scaleX(0); width:0; height:2px; background:var(--second-color); border-radius:2px; transition:all .3s ease; transform-origin:center center } .nav-item.active .nav-link,.nav-item:hover .nav-link{ color:var(--second-color) } .nav-item:hover .nav-link::before{ opacity:1 } .nav-item:hover .nav-link::after{ transform:translateX(-50%) scaleX(1); width:100% } .nav-link .chevron{ font-size:9px; transition:transform .3s ease; color:rgba(7,55,99,.4); margin-left:4px } .nav-item:hover .nav-link .chevron{ transform:rotate(180deg); color:var(--second-color) } .dropdown-panel{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-12px) scale(.95); min-width:240px; background:var(--white-color); border-radius:var(--radius-lg); border:1px solid rgba(7,55,99,.1); overflow:hidden; opacity:0; visibility:hidden; transition:all .3s cubic-bezier(.4, 0, .2, 1); z-index:300; box-shadow:0 20px 60px rgba(7,55,99,.15) } .dropdown-panel::before{ content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid var(--white-color); opacity:0; transition:opacity .3s ease } .nav-item:hover .dropdown-panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1) } .nav-item:hover .dropdown-panel::before{ opacity:1 } .dropdown-panel a{ display:flex; align-items:center; gap:12px; padding:14px 20px; font-size:14px; font-weight:500; color:var(--main-color); border-bottom:1px solid rgba(7,55,99,.05); transition:all .3s ease; position:relative } .dropdown-panel a:last-child{ border-bottom-width:medium; border-bottom-style:none; border-bottom-color:currentcolor } .dropdown-panel a::before{ content:""; position:absolute; left:0; top:0; height:100%; width:3px; background:var(--second-color); transform:scaleY(0); transition:transform .3s ease; transform-origin:center } .dropdown-panel a:hover{ background:rgba(245,166,35,.08); color:var(--second-color); padding-left:24px } .dropdown-panel a:hover::before{ transform:scaleY(1) } .dropdown-panel a i{ color:var(--second-color); font-size:14px; width:18px; text-align:center; transition:transform .3s ease } .dropdown-panel a:hover i{ transform:translateX(3px) } .nav-cta-wrap{ display:none; align-items:center; padding-left:24px; flex-shrink:0 } @media (min-width:1024px){ .nav-cta-wrap{ display:flex } } .nav-cta-wrap::before{ content:""; display:block; width:1px; height:30px; background:rgba(7,55,99,.1); margin-right:24px; border-radius:2px } .btn-book-now{ position:relative; display:flex; align-items:center; gap:8px; padding:12px 28px; background:linear-gradient(135deg,var(--second-color) 0,gold 100%); color:var(--main-color); font-size:14px; font-weight:700; border-radius:var(--radius-lg); overflow:hidden; transition:all .3s ease; cursor:pointer; text-transform:uppercase; letter-spacing:.5px; box-shadow:0 4px 20px rgba(245,166,35,.3); border:none } .btn-book-now:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 8px 30px rgba(245,166,35,.4) } .btn-book-now i,.btn-book-now span{ position:relative; z-index:1 } .btn-book-now i{ font-size:14px; transition:transform .3s ease } .btn-book-now:hover i{ transform:translateX(4px) } .hamburger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; padding:4px; background:0 0; border-width:medium; border-style:none; border-color:currentcolor; border-image:initial; margin-left:auto; border-radius:var(--radius-sm); transition:background .2s; margin-top:25px } @media (min-width:1024px){ .hamburger{ display:none } } .hamburger:hover{ background:var(--color-gray-100) } .ham-bar{ display:block; height:2px; border-radius:2px; background:var(--color-primary); transition:transform .35s,opacity .25s,width .3s } .ham-bar:first-child{ width:100% } .ham-bar:nth-child(2){ width:70% } .ham-bar:nth-child(3){ width:100% } .hamburger.open .ham-bar:first-child{ transform:translateY(7px) rotate(45deg); width:100% } .hamburger.open .ham-bar:nth-child(2){ opacity:0 } .hamburger.open .ham-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); width:100% } .mobile-menu{ display:none; position:fixed; inset:0px; z-index:5000; background:rgba(27,38,75,.6); backdrop-filter:blur(4px) } .mobile-menu.open{ display:block } .mobile-panel{ position:absolute; top:0; left:0; width:min(340px,88vw); height:100%; background:var(--color-white); box-shadow:rgba(0,0,0,.15) -12px 0 40px; display:flex; flex-direction:column; overflow-y:auto; animation:.35s cubic-bezier(.77,0,.18,1) 0s 1 normal both running slideIn } @keyframes slideIn{ 0%{ transform:translateX(-100%) } 100%{ transform:translateX(0) } } .mobile-panel::before{ content:""; position:absolute; top:0; left:0; width:50px; height:50px; background:var(--color-primary); opacity:.06; clip-path:polygon(0px 0px,100% 0px,0px 100%); pointer-events:none } .mobile-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--color-gray-200) } .mobile-close{ width:34px; height:34px; border-radius:50%; border:1px solid var(--color-gray-200); background:0 0; display:flex; align-items:center; justify-content:center; color:var(--color-gray-700); font-size:1rem; transition:background .2s,color .2s } .mobile-close:hover{ background:var(--color-primary); color:var(--color-white) } .mobile-nav-list{ padding:12px 0; flex:1 1 0% } .mobile-nav-item{ border-bottom:1px solid var(--color-gray-100); display:block } .mobile-nav-link{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; font-size:.9rem; font-weight:600; color:var(--color-gray-700); transition:color .2s,background .2s } .mobile-nav-link:hover{ color:var(--color-primary); background:var(--color-gray-100) } .mobile-nav-link i{ font-size:.75rem; color:var(--color-gray-400) } .mobile-sub{ display:none; background:var(--color-gray-100); border-top:1px solid var(--color-gray-200) } .mobile-sub.open{ display:block } .mobile-sub a{ display:flex; align-items:center; gap:8px; padding:11px 20px 11px 30px; font-size:.83rem; color:var(--color-gray-500); transition:color .2s } .mobile-sub a i{ color:var(--color-secondary-dark); font-size:.75rem } .mobile-sub a:hover{ color:var(--color-primary) } .mobile-footer{ padding:16px 20px; border-top:1px solid var(--color-gray-200) } .mobile-book-btn{ display:block; text-align:center; padding:13px; background:var(--color-primary); color:var(--color-white); border-radius:var(--radius-sm); font-weight:700; font-size:.9rem; margin-bottom:14px; transition:background .25s } .mobile-book-btn:hover{ background:var(--color-primary-dark) } .mobile-contacts{ display:flex; flex-direction:column; gap:8px } .mobile-contacts a{ display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--color-gray-500) } .mobile-contacts a i{ color:var(--color-accent) } .mobile-nav-row{ display:flex; align-items:stretch; border-bottom:1px solid var(--color-gray-100) } .mobile-nav-item--has-sub>.mobile-nav-row .mobile-nav-link{ flex:1 1 0%; border-bottom-width:medium; border-bottom-style:none; border-bottom-color:currentcolor } .mobile-arrow{ flex-shrink:0; width:52px; background:0 0; border-top-width:medium; border-right-width:medium; border-bottom-width:medium; border-top-style:none; border-right-style:none; border-bottom-style:none; border-top-color:currentcolor; border-right-color:currentcolor; border-bottom-color:currentcolor; border-image:initial; border-left:1px solid var(--color-gray-200); display:flex; align-items:center; justify-content:center; color:var(--color-gray-400); font-size:.75rem; cursor:pointer; transition:background .2s,color .2s } .mobile-arrow:hover{ background:var(--color-gray-100); color:var(--color-primary) } .mobile-arrow i{ transition:transform .25s; pointer-events:none } .mobile-nav-item--has-sub{ border-bottom-width:medium; border-bottom-style:none; border-bottom-color:currentcolor } .mobile-sub{ display:none; background:var(--color-gray-100); border-top:1px solid var(--color-gray-200); border-bottom:1px solid var(--color-gray-200) } .mobile-sub.open{ display:block } .mobile-sub a,.mobile-sub li{ display:block } .tc-cta{ background:var(--color-secondary); color:var(--color-primary-dark) } .tailor-title-accent{ color:var(--color-secondary-dark) } .hero-img-base{ position:absolute; inset:0px; width:100%; height:100%; object-fit:cover } .final-cta-actions{ background:linear-gradient(135deg,var(--navy) 0,#f5a62399 100%); border-radius:20px; padding:32px; color:#fff; position:relative; overflow:hidden; margin-top:13px; display:flex; justify-content:center; gap:21px } .nav-bar .logo-header{ display:table; float:left; vertical-align:middle; padding:0; margin:0; width:180px; position:relative; z-index:9; transition:1s; height:60px; top:0; left:0px; } .logo-header a{ display:table-cell; vertical-align:middle } .logo-header img{ height:70px; width:170px } .logo-header span{ font-size:20px; letter-spacing:20px } .top-bar{ background-color:var(--white-color); color:var(--main-color); padding:12px 0; border-bottom:1px solid rgba(7,55,99,.08) } .top-bar .dlab-topbar-left{ float:left } .top-bar .dlab-topbar-left li{ padding-right:20px } .top-bar .dlab-topbar-right{ float:right } .top-bar .dlab-topbar-right li{ padding-left:15px } .top-bar .dlab-topbar-center,.top-bar .dlab-topbar-left,.top-bar .dlab-topbar-right{ padding-left:15px; padding-right:15px } .top-bar .dlab-topbar-center ul,.top-bar .dlab-topbar-left ul,.top-bar .dlab-topbar-right ul{ list-style:none; margin:0; padding:0 } .top-bar .dlab-topbar-center ul li,.top-bar .dlab-topbar-left ul li,.top-bar .dlab-topbar-right ul li{ display:inline-block; font-size:14px } .top-bar .dlab-topbar-center ul i,.top-bar .dlab-topbar-left ul i,.top-bar .dlab-topbar-right ul i{ color:var(--main-color); transform:scale(1.3); margin-right:5px } .dlab-quik-search{ background:rgba(0,0,0,.9); position:fixed; height:100%; width:100%; top:0; left:0; padding:0 30px; z-index:999; overflow:hidden; display:none } .dlab-quik-search form{ width:100%; max-width:1200px; margin:auto; position:relative; top:50%; transition:1s; opacity:1 } .dlab-quik-search .form-control{ padding:15px 60px 15px 15px; width:100%; height:90px; border-width:medium medium 2px; border-style:none none solid; border-color:currentcolor currentcolor rgba(255,255,255,.2); border-image:initial; background:0 0; color:var(--white-color); font-size:20px } .dlab-quik-search span{ position:absolute; right:15px; top:50%; margin:-15px 0; height:25px; font-size:20px; cursor:pointer } .site-header.is-fixed{ position:fixed!important; top:0!important; left:0!important; width:100%!important; z-index:999999999999!important } .site-header .main-bar{ border-radius:0 0 24px 24px } .site-header .container{ position:relative } .site-header .extra-nav{ margin-left:0; margin-bottom:0 } .site-header .extra-nav #quik-search-btn{ color:#020d26; cursor:pointer; margin-right:0; border:0 } .site-header .extra-nav ul li{ display:inline-block } .site-header .extra-nav ul li .icon{ padding:0; background:0 0; min-width:40px; text-align:center; height:40px; line-height:40px; border-radius:4px } .navicon{ width:20px; height:18px; position:relative; transform:rotate(0); transition:.5s ease-in-out; cursor:pointer } .navicon span{ display:block; position:absolute; height:2px; width:100%; border-radius:1px; opacity:1; left:0; transform:rotate(0); transition:.25s ease-in-out; background:var(--second-color) } .navicon span:first-child{ top:0 } .navicon span:nth-child(2){ top:7px } .navicon span:nth-child(3){ top:14px } .navicon.open span:first-child{ top:7px; transform:rotate(135deg) } .navicon.open span:nth-child(2){ opacity:0; left:-60px } .navicon.open span:nth-child(3){ top:7px; transform:rotate(-135deg) } .header-tb .navicon span{ background:var(--white-color) } .header-nav{ padding:0 } @media only screen and (max-width:991px){ .header-nav{ overflow-y:visible; position:relative; width:100%; left:0; transition:1s; top:0; margin-bottom:8px; z-index:99; height:auto!important; display:block!important } } @media only screen and (max-width:991px){ .header-nav.show{ left:-1px; transition:.8s; margin:0; width:280px } } @media only screen and (max-width:991px){ .header-nav .logo-header{ padding:0; float:none; height:auto; width:100% } } .header-nav .nav{ padding-top:6px; gap:10px } .header-nav .nav>li{ margin:0; font-weight:400; position:relative; z-index:999999999 } .header-nav .nav>li.has-mega-menu{ position:inherit } @media only screen and (max-width:991px){ .header-nav .nav>li{ border-bottom:1px solid #eee; width:100% } } .header-nav .nav>li:hover>a{ color:var(--main-color) } .header-nav .nav>li>a{ padding:8px 6px; cursor:pointer; position:relative; border-width:0 0 0 1px; text-transform:capitalize; line-height:1.35; transition:all .3s ease; margin-top:0; display:inline-block; font-size:21px; font-weight:600; color:var(--main-color); border-radius:var(--radius-md) } .header-nav .nav>li>a:hover{ background:rgba(245,166,35,.08); color:var(--second-color) } .header-nav .nav>li>span{ padding:3px 18px; cursor:pointer; position:relative; border-width:0 0 0 1px; text-transform:capitalize; line-height:1.35; transition:1s; display:inline-block; font-size:18px; font-weight:400; color:var(--main-color) } @media only screen and (max-width:1199px){ .header-nav .nav>li>a{ padding:35px 12px } } .header-nav .nav>li>a span{ display:inline-block; font-size:18px; font-weight:400; color:var(--b-color) } .header-nav .nav>li>a i{ font-size:9px; margin-left:3px; margin-top:-3px; vertical-align:middle } .header-nav .nav>li>span i{ font-size:9px; margin-left:3px; margin-top:-3px; vertical-align:middle } @media only screen and (max-width:991px){ .header-nav .nav>li>a i{ background-color:var(--white-color); color:var(--main-color); height:30px; line-height:30px; right:0; text-align:center; width:30px; z-index:3; float:right; font-size:20px; margin:0 } .header-nav .nav>li>span i{ background-color:var(--white-color); color:var(--main-color); height:30px; line-height:30px; right:0; text-align:center; width:30px; z-index:3; float:right; font-size:20px; margin:0 } .header-nav .nav li.open a i{ background-color:var(--second-color); border-radius:50%; transform:rotate(90deg); color:var(--white-color) } } @media only screen and (max-width:991px){ .header-nav .nav>li>a i::before{ content:"ï„…" } .header-nav .nav>li>span i::before{ content:"ï„…" } } @media only screen and (max-width:991px){ .header-nav .nav>li>a{ padding:8px 0; display:block; line-height:30px } .header-nav .nav>li>span{ padding:8px 0; display:block; line-height:30px } } .header-nav .nav>li .mega-menu,.header-nav .nav>li .sub-menu{ background-color:rgba(255,255,255,.95); left:73px; list-style:none; opacity:0; padding:12px 0; position:absolute; visibility:hidden; z-index:10; margin-top:12px; box-shadow:0 20px 60px rgba(0,0,0,.15); transition:all .3s cubic-bezier(.4, 0, .2, 1); border-radius:var(--radius-lg); border:1px solid rgba(7,55,99,.1); transform:translateY(-10px) scale(.95) } @media only screen and (max-width:991px){ .header-nav .nav>li .mega-menu,.header-nav .nav>li .sub-menu{ display:none; position:static; visibility:visible; width:auto; background:0 0; box-shadow:none; margin:0; border-top:1px solid #eee; padding:10px 0; transition:none } .header-nav .nav>li .mega-menu>li>a i,.header-nav .nav>li .sub-menu>li>a i{ height:30px; line-height:30px; right:0; text-align:center; width:30px; z-index:3; background:#aaa; color:var(--white-color)!important; font-size:20px!important; margin:0!important } } .header-nav .nav>li .mega-menu li,.header-nav .nav>li .sub-menu li{ position:relative; display:block; border-bottom:1px solid #eee; color:var(--main-color) } .header-nav .nav>li .mega-menu li a,.header-nav .nav>li .sub-menu li a{ color:var(--main-color); display:block; font-size:16px; padding:12px 20px; text-transform:capitalize; position:relative; transition:all .3s ease; font-weight:500; text-align:left; border-radius:var(--radius-md); margin:0 8px } .header-nav .nav>li .mega-menu li a:hover,.header-nav .nav>li .sub-menu li a:hover{ background:linear-gradient(90deg,rgba(245,166,35,.08) 0,transparent 100%); color:var(--second-color); padding-left:24px } @media only screen and (max-width:991px){ .header-nav .nav>li .mega-menu li a,.header-nav .nav>li .sub-menu li a{ padding:2px 0 1px 15px; display:block; line-height:30px; position:relative } .header-nav .nav>li .mega-menu li a::after,.header-nav .nav>li .sub-menu li a::after{ content:"➨"; font-family:FontAwesome; width:auto; height:auto; top:1px; color:var(--main-color); font-size:16px; position:absolute; left:0; font-weight:700; background:0 0!important } } .header-nav .nav>li .mega-menu li:hover>a,.header-nav .nav>li .sub-menu li:hover>a{ background-color:#f2f2f2; padding:10px 14px 10px 28px; color:var(--main-color)!important } @media only screen and (max-width:991px){ .header-nav .nav>li .mega-menu li:hover>a,.header-nav .nav>li .sub-menu li:hover>a{ padding:2px 0 1px 15px; background:0 0 } } .header-nav .nav>li .mega-menu li:hover>a::after,.header-nav .nav>li .sub-menu li:hover>a::after{ width:13px } .header-nav .nav>li .mega-menu li>.sub-menu,.header-nav .nav>li .sub-menu li>.sub-menu{ left:220px; transition:1s } @media only screen and (max-width:991px){ .header-nav .nav>li .mega-menu li>.sub-menu,.header-nav .nav>li .sub-menu li>.sub-menu{ display:none } } @media only screen and (max-width:991px){ .header-nav .nav>li .mega-menu .mega-menu,.header-nav .nav>li .mega-menu .sub-menu,.header-nav .nav>li .sub-menu .mega-menu,.header-nav .nav>li .sub-menu .sub-menu{ border-top:0; padding-left:20px } .header-nav .nav>li .mega-menu .mega-menu li a::after,.header-nav .nav>li .mega-menu .sub-menu li a::after,.header-nav .nav>li .sub-menu .mega-menu li a::after,.header-nav .nav>li .sub-menu .sub-menu li a::after{ width:5px; content:""; height:5px; border-radius:4px; top:13px; background:var(--main-color)!important } } .header-nav .nav>li .sub-menu li .fa{ color:inherit; display:block; float:right; font-size:16px; opacity:1; margin-top:4px } .header-nav .nav>li .mega-menu{ display:flex; right:0; width:100%; z-index:9; padding:0 } .header-nav .nav>li .mega-menu>li{ display:block; padding:30px 0 25px; position:relative; vertical-align:top; width:25% } @media only screen and (max-width:991px){ .header-nav .nav>li .mega-menu>li{ width:100%; padding:0 } } .header-nav .nav>li .mega-menu>li>a{ color:var(--main-color); display:block; padding:0 20px 15px; font-size:16px; font-weight:600; border-bottom:1px solid rgba(0,0,0,.1) } .header-nav .nav>li .mega-menu>li>a>i{ font-size:14px; margin-right:5px; text-align:center; width:15px } .header-nav .nav>li .mega-menu>li::after{ content:""; background-color:rgba(0,0,0,.1); position:absolute; right:0; top:0; display:block; width:1px; height:100% } .header-nav .nav>li .mega-menu>li:last-child::after{ display:none } .header-nav .nav>li .mega-menu>li:hover>a{ background-color:transparent } .header-nav .nav>li .mega-menu>li li i{ font-size:14px; margin-right:5px; text-align:center; width:15px } .header-nav .nav>li:hover>.mega-menu,.header-nav .nav>li:hover>.sub-menu{ opacity:1; visibility:visible; margin-top:0; transform:translateY(0) scale(1); transition:all .4s cubic-bezier(.4, 0, .2, 1) } .header-nav .nav>li:hover>.mega-menu li:hover>.sub-menu,.header-nav .nav>li:hover>.sub-menu li:hover>.sub-menu{ opacity:1; visibility:visible; margin-top:0; top:-1px } .header-nav .nav>li.open .mega-menu,.header-nav .nav>li.open .sub-menu{ display:block; opacity:1; transition:none } .header-nav .nav>li.open .open.menu-item-has-children>a::before{ transform:rotate(90deg) } .header-nav .nav>li.open .open .mega-menu,.header-nav .nav>li.open .open .sub-menu{ display:block; opacity:1; transition:none } @media only screen and (max-width:1400px){ .header-nav .nav>li:last-child .sub-menu .sub-menu,.header-nav .nav>li:nth-last-child(2) .sub-menu .sub-menu,.header-nav .nav>li:nth-last-child(3) .sub-menu .sub-menu{ left:-220px } } @media only screen and (max-width:1199px){ .header-nav .nav>li:last-child .sub-menu{ left:auto; right:0 } } .header-transparent{ border-radius:0 0 24px 24px } .main-nav-bar .container-fluid{ overflow:visible } .main-nav-bar{ overflow:visible } .header-transparent .side-menu-btn .menu-icon-in span{ background-color:var(--white-color) } .header-transparent .is-fixed .side-menu-btn .menu-icon-in span{ background-color:var(--main-color) } .header-transparent .top-bar{ border-color:var(--white-color) } .header-transparent .top-bar .dlab-topbar-left i,.header-transparent .top-bar .dlab-topbar-left li,.header-transparent .top-bar .dlab-topbar-right i,.header-transparent .top-bar .dlab-topbar-right li{ color:var(--white-color) } .is-fixed .main-bar{ background:#fff; backdrop-filter:blur(10px); color:var(--second-color); padding-top:7px; box-shadow:0 0 50px 0 rgb(0 0 0 / 20%); padding-bottom:14px } .upper___right{ display:flex; gap:32px } .upper___right a{ color:var(--second-color); font-size:17px; font-weight:400; padding-left:0!important } .is-fixed .main-bar .logo-top{ display:none!important } .is-fixed .main-bar .logo-scroll{ display:block!important } .is-fixed .extra-nav .btn-effect:hover{ color:#eee } .text-black .nav>li>a{ color:var(--main-color) } .navbar-toggler{ height:41px; line-height:32px; width:36px; cursor:pointer; top:28px; right:11px; position:absolute; margin-right:20px; bottom:35px; font-size:28px } .navbar-toggler:focus{ border-width:medium; border-style:none; border-color:currentcolor; border-image:initial; box-shadow:none } .navbar-toggle .navbar-toggler-icon{ transition:.4s ease-in-out } .navbar-toggler-icon:hover span{ background:var(--second-color) } .navbar-toggler-icon span:first-child{ background:var(--second-color); display:block; height:3px; left:0; margin:auto; position:absolute; right:0; width:27px; top:0 } .navbar-toggler-icon span:nth-child(2){ background:var(--second-color); display:block; height:3px; left:0; margin:auto; position:absolute; right:0; width:27px; top:6px } .navbar-toggler-icon span:nth-child(3){ background:var(--second-color); display:block; height:3px; left:0; margin:auto; position:absolute; right:0; width:27px; top:12px } .site-header .is-fixed .extra-nav .btn.btn-light{ background-color:var(--main-color); color:var(--white-color) } .mobile-overlay{ height:100%; background:rgba(253,253,253,.95); position:absolute; left:0; top:0; z-index:98; opacity:0; visibility:hidden; width:0; transition:.4s } .mobile-overlay{ height:100%; background:rgba(253,253,253,.95); position:absolute; left:0; top:0; z-index:98; opacity:0; visibility:hidden; width:0; transition:.4s } .mobile-overlay.open{ width:100%; opacity:1; visibility:inherit; animation:.5s ease 0s 1 normal none running fadeIn } .btn--effect{ display:inline-flex; color:#fff; padding:8px 50px; text-align:center; font-weight:700; background-color:var(--second-color); position:relative; z-index:1; font-size:16px; align-items:center; gap:8px; border-radius:12px; overflow:hidden; line-height:175%; border:var(--second-color) } .btn--effect ::before{ content:""; pointer-events:none; opacity:.6; width:100%; height:300%; top:0; left:0; position:absolute } .btn--effect:hover{ color:#fff } .btn--effect :hover::after{ height:100%; color:#fff } .btn--effect ::after{ position:absolute; width:100%; height:0; left:0; top:0; background-color:#21363f; content:""; z-index:-1; color:#fff } .header-nav{ display:flex; align-items:center; justify-content:space-around } .nav_icon i{ color:var(--second-color); margin-right:4px; font-size:16px } .text-nav{ color:rgba(255,255,255,.85); font-size:13px; font-weight:500 } .nav_icon span{ font-size:15px } .upper-navbar-right{ display:flex; align-items:center; justify-content:flex-end; gap:10px; overflow:visible; position:relative; z-index:9999999999999999; } nav{ display:block; width:100%; position:relative } .navbar-brand img{ width:160px!important } .dropdown-menu.show{ z-index:10000!important } .lang-dropdown{ z-index:9999999!important } .dropdown-menu{ z-index:99999999!important } .Language-box,.currency-box{ padding:0; color:var(--white-color); margin-left:0; border-radius:5px } .Language-box .lang-btn,.currency-box .currency-btn{ color:rgba(255,255,255,.85); font-size:13px; font-weight:500; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-sm); padding:6px 12px; transition:all .3s ease } .Language-box .lang-btn:hover,.currency-box .currency-btn:hover{ background:rgba(255,255,255,.1); border-color:var(--second-color); color:var(--white-color) } .navsLink-hasdropdown .dropdown-menu{ transition:.6s ease-in-out } .navsLink-hasdropdown:hover .dropdown-menu{ display:block; transform:translateZ(0); padding:0 } .navsLink,.navsLink-hasdropdown{ font-size:17px; font-weight:500; padding:5px 10px; display:inline-block; color:var(--second-color); transition:.3s; text-decoration:none } .nav-menu-bar{ background:var(--white-color); border-bottom:1px solid #eee; height:85px; width:100% } .nav-bar .single-item{ position:relative; padding-left:40px; float:right } .nav-bar .single-item span{ left:0; top:0; color:var(--main-color); position:absolute } .nav-bar .single-item span::before{ margin:0; font-size:30px; line-height:30px } .nav-bar .single-item p{ margin-bottom:0; font-size:13px; line-height:26px; color:var(--white-color); font-weight:500 } .single-item>a{ text-decoration:none; display:inline-block; font-size:18px; font-weight:400; color:var(--b-color) } .navbar-light .navbar-toggler,.navbar-light .navbar-toggler:focus{ outline:0; color:var(--white-color); border-width:medium; border-style:none; border-color:currentcolor; border-image:initial } .nav-menu{ padding:0; margin:0; list-style:none; float:left; width:100% } .nav-menu .btn-effect{ margin-left:3rem } .nav-menu li{ display:inline-block } .nav-menu li a{ color:#142843; text-decoration:none; display:block; font-size:16px; font-weight:600; position:relative } .nav-menu li span{ color:#142843; text-decoration:none; display:block; font-size:16px; font-weight:600; position:relative } .dropdown-menu li{ display:block; width:100%; transition:transform .3s ease-in-out,visibility .3s ease-in-out,-webkit-transform .3s ease-in-out; border-bottom:1px solid #eee } .dropdown-li:hover .dropdown-menu{ display:block; border-radius:10px; padding:0 } .navsLink.dropdown-li i{ padding-left:3px } .navsLink.dropdown-li:hover .nav-link i{ transform:rotate(-180deg); color:var(--main-color) } .dropdown-menu li:last-child{ border-bottom-width:medium; border-bottom-style:none; border-bottom-color:currentcolor } .dropdown-menu li .dropdown-item{ text-transform:capitalize; font-weight:500; padding:10px 0 10px 15px; transition:transform .3s ease-in-out,visibility .3s ease-in-out,-webkit-transform .3s ease-in-out } .dropdown-item.active,.dropdown-item:active{ background-color:var(--main-color); color:var(--second-color) } .nav-menu .nav-item.active .nav-link,.nav-menu .nav-item:hover .nav-link{ color:var(--main-color) } .contact-boxes{ height:100%; padding:0 28px 0 0; overflow:visible; position:relative; z-index:9999999999999999; } .bg-gray{ background-color:rgba(7,55,99,.9); backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,255,255,.1); position:relative; z-index:9999999999999999; } .side-menu{ position:fixed; top:0; left:-89%; width:97%; height:calc(100% - 1px); padding:17px; background:var(--white-color); visibility:hidden; z-index:23000; backface-visibility:hidden; box-shadow:rgba(0,0,0,.02) -11px 0 13px; overflow:hidden auto; transition:.4s } .mobile.nav-item{ padding-block:10px;border-block:1px solid rgb(238,238,238)} .mobile.nav-item,.mobile.sub-menu li{ display:block } .mobile.sub-menu li a{ padding:.5rem 1rem } .icon-down.icon-down-one{ position:absolute; right:15px; top:12px } .mobile-logo img{ max-width:100%; height:47px } .side-menu.open{ left:0; visibility:visible; top:0; bottom:0; border-radius:0 10px 10px 0; border:1px solid #eee; box-shadow:#b5b5b5 11px 6px 13px } .close-side-menu{ top:14px; right:14px; width:40px; height:40px; position:absolute; background:var(--main-color); z-index:55; text-align:center; line-height:40px; transition:.4s; border-radius:50% } .close-side-menu i.fas.fa-times{ font-size:20px; font-weight:700; text-align:center; line-height:40px; color:var(--white-color) } .dlab-social-icon{ margin-top:15px } .dlab-social-icon li{ padding:.75rem; position:relative; background-color:#eee; border-radius:50% } .dlab-social-icon li a{ color:var(--second-color) } .dlab-social-icon li::after{ content:""; width:100%; height:100%; background-color:var(--second-color); position:absolute; top:0; left:0; transform:scale(0); border-radius:50%; z-index:-1; transition:transform .3s,opacity .3s } .dlab-social-icon li:hover::after{ transform:scale(1) } .close-side-menu:hover i.fas.fa-times{ transform:rotate(360deg) } .close-side-menu:hover{ background:var(--second-color); color:var(--white-color); border-radius:0 } .close-side-menu:hover span{ color:var(--white-color) } .close-menu-sidebar{ height:100%; background-color:rgba(253,253,253,.8); position:absolute; right:0; top:0; z-index:22000; opacity:0; visibility:hidden; width:0; transition:.4s } .close-menu-sidebar.open{ width:100%; opacity:1; visibility:inherit; animation:.5s ease 0s 1 normal none running fadeIn } .side-menu-btn{ text-decoration:none; transition:.4s; border-radius:0; text-align:center; padding:0; z-index:555; width:20px; height:15px; right:-40px; top:30px; color:#122b51!important; position:absolute!important } .side-menu-btn:hover{ color:var(--main-color)!important } .side-menu-btn span{ display:block; position:absolute; transition:.3s linear; width:20px; top:0; right:0 } .mobile.sub-menu{ visibility:hidden; max-height:0; transition:max-height 1s ease-in-out,visibility linear 1s; overflow:hidden!important; backface-visibility:hidden!important } .mobile.sub-menu.sub-menu-collapsed{ visibility:visible; max-height:500px; transition:max-height 1s ease-in-out,visibility linear; backface-visibility:visible!important } .nav-menu{ padding:0; margin:28px 0 0; list-style:none; float:left; width:100% } .sub-menu img{ width:40px; height:40px; margin-top:0; margin-right:7px; border-radius:20px } .btn-effect_nav{ display:inline-flex; color:#fff; text-align:center; font-weight:700; position:relative; z-index:1; font-size:17px; align-items:center; line-height:175%; border-radius:12px; overflow:hidden; border:initial initial #000; transition:all; margin-right:10px } .btn-effect_nav i{ margin-right:6px } @media only screen and (min-width:1199px){ .is-fixed .header-nav .nav>li>a{ padding:2px 8px } .is-fixed .header-nav .nav>li>span{ padding:10px 16px } .is-fixed .logo-header{ height:80px } } @media (max-width:767.98px){ .social-media{ display:none } .contact-boxes{ justify-content:start } .contact-boxes{ flex-wrap:wrap; padding:5px } .single-item{ margin-bottom:-9px } .nav-bar .single-item:last-child{ padding-left:0!important } .nav_icon{ display:none!important } } .theme-btn{ position:relative; z-index:2; overflow:hidden; vertical-align:middle; display:inline-flex; align-items:center; gap:8px; text-transform:uppercase; text-align:center; border-radius:var(--radius-sm); background-color:transparent; font-size:13px; font-weight:600; line-height:1; padding:10px 24px; border:2px solid var(--second-color); color:var(--second-color)!important; letter-spacing:.5px; transition:all .3s ease } .theme-btn:hover{ background-color:var(--second-color); color:var(--main-color)!important; transform:translateY(-2px); box-shadow:0 4px 20px rgba(245,166,35,.3) } .theme-btn:hover::before{ width:100%; color:#fff } .extra-nav a:hover{ color:#fff!important } .theme-btn::before{ content:""; position:absolute; height:100%; bottom:0; left:0; width:0; background-color:var(--second-color); z-index:-1; transition:.4s ease-out; border-radius:inherit; color:#fff } .sub_menu{ width:214px; left:0!important; top:42px } .sub-menu.deals-dropdown{ background:var(--white-color); z-index:999999999; padding:24px; border-radius:var(--radius-lg); box-shadow:0 25px 70px rgba(7,55,99,.15); border:1px solid rgba(7,55,99,.1); min-width:279px; position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-12px) scale(.95); opacity:0; visibility:hidden; transition:all .3s cubic-bezier(.4, 0, .2, 1); z-index:300; width:1px } .sub-menu.deals-dropdown::before{ content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid var(--white-color); opacity:0; transition:opacity .3s ease } .header-nav .nav>li:hover>.sub-menu.deals-dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1) } .header-nav .nav>li:hover>.sub-menu.deals-dropdown::before{ opacity:1 } .ao-header-navigation__dropdown-info{ background:#efefef; padding:15px; border-radius:10px; width:230px } .ao-header-navigation__dropdown-info-title{ font-weight:400; margin-bottom:7px; font-size:22px; color:var(--second-color) } .deals-links{ list-style:none; padding:0; margin:0; width:100% } .deals-links li{ margin-bottom:6px } .deals-links a{ text-decoration:none; color:var(--main-color); display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; padding:12px 16px; border-radius:var(--radius-md); transition:all .3s ease; position:relative } .deals-links a::before{ content:"➥ "; position:absolute; right:16px; opacity:0; transform:translateX(-10px); transition:all .3s ease; color:var(--second-color); font-weight:700 } .deals-links a:hover{ background:rgba(245,166,35,.08); color:var(--second-color); padding-left:20px } .deals-links a:hover::before{ opacity:1; transform:translateX(0) } .bottom-area{ display:flex; align-items:center; justify-content:space-between; gap:15px } .bottom-area>a{ color:var(--main-color); font-size:16px; font-weight:500; line-height:1; text-decoration-line:underline; text-transform:capitalize; display:flex; align-items:center; gap:10px; transition:.5s } .bottom-area>a>span{ width:22px; height:22px; border-radius:50%; border:1px solid var(--main-color); display:flex; align-items:center; justify-content:center; transition:.5s } .bottom-area>a>span svg{ stroke:var(--main-color); transition:.5s } .bottom-area>a:hover{ color:var(--main-color)!important } .bottom-area>a:hover span{ border-color:var(--main-color)!important } .bottom-area>a:hover span svg{ transform:rotate(48deg); stroke:var(--main-color)!important } .bottom-area .social-list{ display:flex; align-items:center; gap:30px } .sticky-header.is-fixed{ position:fixed!important; top:0!important; left:0!important; width:100%!important; z-index:99999999999!important } .text-nav p{ color:#fff; margin-bottom:0 } .header-nav .nav>li:hover>.sub_menu::before{ opacity:1 } .sub_menu::before{ content:""; position:absolute; top:-6px; left:20%; transform:translateX(-50%); width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid var(--white-color); opacity:0; transition:opacity .3s ease } .destinations--section .hero-search-btn{ width:auto!important } .destinations--section .extra-nav{ display:flex; align-items:center; justify-content:center; margin-bottom:20px } .thank-you-section{ padding:120px 0 80px; min-height:60vh; display:flex; align-items:center; background:linear-gradient(135deg,#1a1a2e 0,#16213e 50%,#0f3460 100%); position:relative; overflow:hidden } .thank-you-section::before{ content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.03)"/></svg>'); background-size:50px 50px; opacity:.5 } .rocket{ position:absolute; font-size:30px; color:#ffc107; opacity:.6; animation:rocketFly 8s linear infinite } .rocket::before{ content:'🚀' } .rocket:first-child{ left:10%; animation-delay:0s; animation-duration:7s } .rocket:nth-child(2){ left:30%; animation-delay:2s; animation-duration:9s; font-size:25px } .rocket:nth-child(3){ left:50%; animation-delay:4s; animation-duration:6s; font-size:35px } .rocket:nth-child(4){ left:70%; animation-delay:1s; animation-duration:8s; font-size:28px } .rocket:nth-child(5){ left:85%; animation-delay:3s; animation-duration:10s; font-size:32px } @keyframes rocketFly{ 0%{ bottom:-100px; transform:translateX(0) rotate(-45deg); opacity:0 } 10%{ opacity:.6 } 50%{ transform:translateX(50px) rotate(-45deg) } 90%{ opacity:.6 } 100%{ bottom:120%; transform:translateX(-30px) rotate(-45deg); opacity:0 } } .butterfly{ position:absolute; font-size:20px; color:#ff9800; opacity:.5; animation:butterflyFly 12s ease-in-out infinite } .butterfly::before{ content:'🦋' } .butterfly:nth-child(6){ left:15%; animation-delay:0s; animation-duration:11s } .butterfly:nth-child(7){ left:40%; animation-delay:3s; animation-duration:13s; font-size:18px } .butterfly:nth-child(8){ left:60%; animation-delay:5s; animation-duration:10s; font-size:22px } .butterfly:nth-child(9){ left:80%; animation-delay:2s; animation-duration:14s; font-size:16px } .butterfly:nth-child(10){ left:25%; animation-delay:7s; animation-duration:12s; font-size:24px } @keyframes butterflyFly{ 0%{ top:110%; left:0; transform:rotate(0) scale(1); opacity:0 } 10%{ opacity:.5 } 25%{ left:20%; transform:rotate(15deg) scale(1.1) } 50%{ top:50%; left:30%; transform:rotate(-15deg) scale(.9) } 75%{ left:10%; transform:rotate(10deg) scale(1.05) } 90%{ opacity:.5 } 100%{ top:-10%; left:15%; transform:rotate(0) scale(1); opacity:0 } } .sparkle{ position:absolute; width:4px; height:4px; background:#ffc107; border-radius:50%; animation:sparkle 3s ease-in-out infinite } .sparkle:nth-child(11){ left:20%; top:20%; animation-delay:0s } .sparkle:nth-child(12){ left:80%; top:30%; animation-delay:1s } .sparkle:nth-child(13){ left:50%; top:60%; animation-delay:2s } .sparkle:nth-child(14){ left:30%; top:70%; animation-delay:.5s } .sparkle:nth-child(15){ left:70%; top:40%; animation-delay:1.5s } @keyframes sparkle{ 0%,100%{ opacity:0; transform:scale(0) } 50%{ opacity:1; transform:scale(1); box-shadow:0 0 10px #ffc107,0 0 20px #ffc107 } } .firework{ position:absolute; width:6px; height:6px; border-radius:50%; animation:fireworkExplode 4s ease-out infinite } .firework::after,.firework::before{ content:''; position:absolute; width:100%; height:100%; border-radius:50%; animation:fireworkParticle 4s ease-out infinite } .firework:nth-child(16){ left:25%; top:30%; background:#ff6b6b; animation-delay:0s } .firework:nth-child(16)::before{ background:#ffd93d; animation-delay:.1s } .firework:nth-child(16)::after{ background:#6bcb77; animation-delay:.2s } .firework:nth-child(17){ left:75%; top:40%; background:#4d96ff; animation-delay:1.5s } .firework:nth-child(17)::before{ background:#ff6b6b; animation-delay:1.6s } .firework:nth-child(17)::after{ background:#ffd93d; animation-delay:1.7s } .firework:nth-child(18){ left:50%; top:50%; background:#ffd93d; animation-delay:3s } .firework:nth-child(18)::before{ background:#6bcb77; animation-delay:3.1s } .firework:nth-child(18)::after{ background:#4d96ff; animation-delay:3.2s } .firework:nth-child(19){ left:30%; top:60%; background:#6bcb77; animation-delay:2s } .firework:nth-child(19)::before{ background:#ff6b6b; animation-delay:2.1s } .firework:nth-child(19)::after{ background:#ffd93d; animation-delay:2.2s } .firework:nth-child(20){ left:70%; top:25%; background:#ff6b6b; animation-delay:.5s } .firework:nth-child(20)::before{ background:#4d96ff; animation-delay:.6s } .firework:nth-child(20)::after{ background:#6bcb77; animation-delay:.7s } @keyframes fireworkExplode{ 0%{ transform:scale(0); opacity:1 } 50%{ transform:scale(1); opacity:1; box-shadow:0 0 20px currentColor,0 0 40px currentColor,0 0 60px currentColor } 100%{ transform:scale(2); opacity:0 } } @keyframes fireworkParticle{ 0%{ transform:translate(0,0) scale(1); opacity:1 } 100%{ transform:translate(var(--tx,50px),var(--ty,-50px)) scale(0); opacity:0 } } .firework:nth-child(16)::before{ --tx:40px; --ty:-40px } .firework:nth-child(16)::after{ --tx:-40px; --ty:-30px } .firework:nth-child(17)::before{ --tx:-50px; --ty:40px } .firework:nth-child(17)::after{ --tx:30px; --ty:-50px } .firework:nth-child(18)::before{ --tx:45px; --ty:35px } .firework:nth-child(18)::after{ --tx:-35px; --ty:45px } .firework:nth-child(19)::before{ --tx:-45px; --ty:-35px } .firework:nth-child(19)::after{ --tx:35px; --ty:-45px } .firework:nth-child(20)::before{ --tx:50px; --ty:-40px } .firework:nth-child(20)::after{ --tx:-40px; --ty:50px } .thank-you-content{ text-align:center; position:relative; z-index:1; max-width:700px; margin:0 auto } .thank-you__icon{ margin-bottom:30px } .icon-circle{ width:100px; height:100px; background:linear-gradient(135deg,#ffc107 0,#ff9800 100%); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto; box-shadow:0 10px 40px rgba(255,193,7,.4); animation:scaleIn .6s ease-out } @keyframes scaleIn{ 0%{ transform:scale(0); opacity:0 } 50%{ transform:scale(1.1) } 100%{ transform:scale(1); opacity:1 } } .icon-circle i{ font-size:50px; color:#fff } .thank-you__title{ font-size:56px; font-weight:800; color:#fff; margin-bottom:15px; text-shadow:2px 2px 4px rgba(0,0,0,.3); animation:fadeInUp .6s ease-out .2s both } .thank-you__subtitle{ font-size:24px; color:#ffc107; margin-bottom:25px; font-weight:600; animation:fadeInUp .6s ease-out .4s both } .thank-you__description{ font-size:18px; color:rgba(255,255,255,.85); line-height:1.8; margin-bottom:40px; animation:fadeInUp .6s ease-out .6s both } @keyframes fadeInUp{ 0%{ transform:translateY(30px); opacity:0 } 100%{ transform:translateY(0); opacity:1 } } .thank-you__info{ display:flex; justify-content:center; gap:30px; margin-bottom:40px; flex-wrap:wrap; animation:fadeInUp .6s ease-out .8s both } .info-card{ display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.1); backdrop-filter:blur(10px); padding:15px 25px; border-radius:50px; border:1px solid rgba(255,255,255,.2); transition:all .3s ease } .info-card:hover{ background:rgba(255,255,255,.15); transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,.2) } .info-card i{ font-size:20px; color:#ffc107 } .info-card span{ color:#fff; font-size:16px; font-weight:500 } .thank-you__actions{ display:flex; justify-content:center; gap:20px; flex-wrap:wrap; animation:fadeInUp .6s ease-out 1s both } .thank-you__actions .btn{ padding:15px 35px; font-size:16px; font-weight:600; border-radius:50px; text-decoration:none; display:inline-flex; align-items:center; gap:10px; transition:all .3s ease; border:2px solid transparent } .thank-you__actions .btn-primary{ background:linear-gradient(135deg,#ffc107 0,#ff9800 100%); color:#1a1a2e; box-shadow:0 5px 20px rgba(255,193,7,.4) } .thank-you__actions .btn-primary:hover{ transform:translateY(-3px); box-shadow:0 10px 30px rgba(255,193,7,.5) } .thank-you__actions .btn-outline{ background:0 0; color:#fff; border-color:#ffc107 } .thank-you__actions .btn-outline:hover{ background:rgba(255,193,7,.1); transform:translateY(-3px) } @media (max-width:768px){ .thank-you-section{ padding:80px 0 60px } .thank-you__title{ font-size:40px } .thank-you__subtitle{ font-size:20px } .thank-you__description{ font-size:16px } .icon-circle{ width:80px; height:80px } .icon-circle i{ font-size:40px } .thank-you__info{ flex-direction:column; gap:15px } .thank-you__actions{ flex-direction:column; width:100% } .thank-you__actions .btn{ width:100%; justify-content:center } .header-nav .nav{ padding-top:6px; gap:10px; display:none } .footer-deco{ padding-top:9px; padding-left:0; padding-right:0 } .footer-grid{ display:grid; grid-template-columns:repeat(1,1fr); gap:2rem .5rem; margin-bottom:24px; padding-top:32px; padding-left:9px; padding-right:0 } .site-footer{ padding-bottom:94px } } @media (max-width:480px){ .dest-grid-modern .dest-card:nth-child(5),.dest-grid-modern .dest-card:nth-child(6){ grid-column:span 1 } } .activity_autocomplete{ height:55px !important; padding:0 18px; border:2px solid rgba(7, 55, 99, .12) !important; } .tour-content h3{ font-size:18px; } #gallery .swiper-wrapper{ justify-content:center; } .legend-pagination__active{ border-color:#0b2239 !important; background:#0b2239 !important; color:#fff; } @media (max-width:576px){ .tour-content h3{ font-size:18px; height:63px; } #gallery .swiper-wrapper{ justify-content:flex-start; } } @media (min-width:1024px) and (max-width:1440px){ .header-nav .nav>li>a{ padding:8px 1px; } } @media (min-width:1100px){ .header-nav .nav>li>a{ padding:8px 1px; } } .destSlug__price{ font-size:16px; } p a{ color:#0056b3!important; font-weight:700 }