@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Istok+Web:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap'); html{scroll-behavior: smooth} body, html{margin: 0; padding: 0; height: 100%} body h1,h2,h3,h4,h5,h6{font-family: "Roboto", sans-serif !important; font-weight: 700 !important} body p{font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important} @media (max-width: 576px){.d-xs-none{display: none}} .navbar{background: transparent !important; z-index: 2} .navbar-nav .nav-link{font-size: 1.4rem; font-weight: bold} header{position: relative; background-image: url('/images/background1.jpg'); background-size: cover; padding-bottom: 20px} .background-overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ); filter: blur(2px); z-index: 1} @keyframes slideIn{0%{transform: translateX(-100%)} 100%{transform: translateX(0)} } .panel{padding: 20px; color: white; position: relative; z-index: 2} .company-name{font-family: 'Roboto', sans-serif; font-size: 4rem; font-weight: bold; margin-bottom: 10px} @media (max-width: 576px){.company-name{font-size: 2.6rem} } .subtext{font-size: 1.5rem; color: #333} .logo{height: 50px; height: 38px; width: 50px; margin-bottom: 15px} .LeftTextPanel{text-align: left} .DarkenedTextPanel{color: rgba(161, 161, 161, 0.6); text-align: right} .left-line-container{width: 100%; display: flex; justify-content: center} .left-line{height: 2px; background-color: #fff; width: 0; margin-left: -15%; animation: slideFromCenter 1s ease-in-out 800ms forwards} @keyframes slideFromCenter{0%{width: 0} 100%{width: 85%} } .company-name-blue{color: mediumblue; z-index: 999} .company-name-yellow{color: gold; z-index: 999} .panel-text-description{font-family: "Fira Sans", sans-serif; font-size: 1.2rem; font-weight: 400; margin-bottom: 10px} .read-more-btn{color: gold; border-color: gold; transition: all 0.3s ease-in-out; border-radius: 0.05rem} .read-more-btn:hover{color: black; background-color: #e6c720; border-color:gold } #circle{width: 14rem; height: 14rem; border-radius: 50%; background-color: rgba(255, 255, 255, 0.06); position: absolute; top: 20%; left: 70%; transform: translate(-50%, -50%); animation: circleMovement 2s infinite alternate} #circle3{width: 14rem; height: 14rem; border-radius: 50%; background-color: rgba(255, 255, 255, 0.06); position: absolute; z-index: 100; top: 120%; left: 115%; transform: translate(-50%, -50%); animation: circleMovement 2s infinite alternate} @keyframes circleMovement{from{transform: translate(-50%, -50%) translate(var(--translate-x), var(--translate-y)) scale(1)} to{transform: translate(-50%, -50%) translate(var(--translate-x), var(--translate-y)) scale(1.2)} } #circle2{width: 14rem; height: 14rem; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); position: absolute; top: 20%; left: 70%; transform: translate(-50%, -50%); animation: circleMovement2 4s infinite alternate} @keyframes circleMovement2{from{transform: translate(-50%, -50%) translate(var(--translate-x), var(--translate-y)) scale(1)} to{transform: translate(-50%, -50%) translate(var(--translate-x), var(--translate-y)) scale(1.2)} } @keyframes lightning-wave{0%{opacity: 0.7} 50%{opacity: 1} 100%{opacity: 0.7} } #lightning{z-index: -100; top: 6%; left: 200px; position: absolute; width: 70px; height: 125px; background-color: rgba(255, 215, 0, 0.199); transform: rotate(-120deg) skewX(-40deg); animation: lightning-wave 3s infinite} #lightning::before{z-index: -100; content: ''; position: absolute; top: -125px; left: -25px; border-bottom: 125px solid rgba(255, 215, 0, 0.2); border-left: 70px solid rgba(255, 215, 0, 0.2); animation: lightning-wave 3s infinite} #lightning::after{z-index: -100; content: ''; position: absolute; bottom: -125px; right: -25px; border-top: 125px solid rgba(255, 215, 0, 0.2); border-right: 70px solid transparent; animation: lightning-wave 3s infinite} @keyframes shine{0%{transform: rotate(25deg) translate(180px, 70px)} 50%{transform: rotate(25deg) translate(-180px)} 100%{transform: rotate(25deg) translate(180px, 70px)} } .shape{top: 6%; left: 55px; position: absolute; width: 70px; height: 125px; background-color: rgba(255, 215, 0, 0.199); transform: rotate(-120deg) skewX(-40deg); overflow: hidden; animation: lightning-wave 4s infinite} .shape:before{top: 6%; left: 0px; top: -60px; position: absolute; width: 20px; height: 125px; content: ''; background: rgba(255, 255, 255, 0.4); filter: blur(3px); overflow: hidden; animation: shine-sequence 4s infinite} @keyframes shine2{0%{transform: rotate(-90deg) translate(1px, 1px)} 100%{transform: rotate(-90deg) translate(-110px)} } @keyframes shine-sequence{0%, 90%{animation-timing-function: linear; transform: rotate(-90deg) translate(20px, 20px)} 92%, 100%{animation-timing-function: steps(1); transform: rotate(-90deg) translate(-140px)} } .shape2{top: 20px; left: 199px; position: absolute; width: 70px; height: 125px; background-color: rgba(255, 215, 0, 0.2); transform: rotate(-120deg) skewX(-40deg); animation: lightning-wave 4s infinite; overflow: hidden} .shape2:before{top: 6%; left: 0px; top: -60px; position: absolute; width: 20px; height: 125px; content: ''; background: rgba(255, 255, 255, 0.4); filter: blur(3px); overflow: hidden; animation: shine-sequence2 4s infinite} @keyframes shine-sequence2{0%, 92%{animation-timing-function: linear; transform: rotate(-90deg) translate(20px, 20px)} 94%, 100%{animation-timing-function: steps(1); transform: rotate(-90deg) translate(-140px)} } .shape3{top: 20px; left: 343px; position: absolute; width: 70px; height: 125px; animation: lightning-wave 4s infinite; overflow: hidden; transform: rotate(-120deg) skewX(-40deg); clip-path: polygon(0% 0%, 100% 0%, 0% 100%); background-color: rgba(255, 215, 0, 0.2)} .shape3:before{top: 6%; left: 0px; top: -60px; position: absolute; width: 20px; height: 125px; content: ''; background: rgba(255, 255, 255, 0.4); filter: blur(3px); overflow: hidden; animation: shine-sequence3 4s infinite} @keyframes shine-sequence3{0%, 94%{animation-timing-function: linear; transform: rotate(-90deg) translate(20px, 20px)} 96%, 100%{animation-timing-function: steps(1); transform: rotate(-90deg) translate(-140px)} } @media (max-width: 768px){.navbar-nav .nav-link{font-size: 2rem; margin-bottom: 5px; border-bottom: 2px solid white; padding-bottom: 5px} } @media (max-width: 576px){.navbar-nav .nav-link{font-size: 2rem; margin-bottom: 5px; border-bottom: 2px solid white; padding-bottom: 5px} } .icon-container-navpanel{font-size: 24px; position: relative; display: flex; align-items: center; z-index: 999} .icon-container-navpanel a{color: white; margin-right: 20px; transition: color 0.3s ease} .icon-container-navpanel a:hover{color: gold} .icon-container-navpanel-panel{font-size: 24px; z-index: 999} .icon-container-navpanel-panel a{color: white; margin-left: 20px; transition: color 0.3s ease} .icon-container-navpanel-panel a:hover{color: gold} #scrolldown a{padding-top: 60px} #scrolldown a span{position: absolute; top: 0; left: 50%; width: 30px; height: 50px; margin-left: -15px; border: 2px solid #fff; border-radius: 50px; box-sizing: border-box} #scrolldown a span::before{position: absolute; top: 10px; left: 50%; content: ''; width: 6px; height: 6px; margin-left: -3px; background-color: #fff; border-radius: 100%; -webkit-animation: sdb10 2s infinite; animation: sdb10 2s infinite; box-sizing: border-box} @-webkit-keyframes sdb10{0%{-webkit-transform: translate(0, 0); opacity: 0} 40%{opacity: 1} 80%{-webkit-transform: translate(0, 20px); opacity: 0} 100%{opacity: 0} } @keyframes sdb10{0%{transform: translate(0, 0); opacity: 0} 40%{opacity: 1} 80%{transform: translate(0, 20px); opacity: 0} 100%{opacity: 0} } .SlideInLeft{animation: slide-in-anim-from-right 500ms ease-out forwards} @keyframes slide-in-anim-from-right{0%{opacity: 0; transform: translateX(20%)} 100%{opacity: 1; transform: translateX(0%)} } @keyframes slide-in-anim-invbar{0%{opacity: 0; transform: translateX(20%)} 100%{opacity: 1; transform: translateX(0%)} } .animate__delay-200ms{-webkit-animation-delay: 200ms; animation-delay: 200ms; -webkit-animation-delay: calc(var(--animate-delay)* 2); animation-delay: calc(var(--animate-delay)* 2)} .animate__delay-400ms{-webkit-animation-delay: 400ms; animation-delay: 400ms; -webkit-animation-delay: calc(var(--animate-delay)* 4); animation-delay: calc(var(--animate-delay)* 4)} .animate__delay-600ms{-webkit-animation-delay: 600ms; animation-delay: 600ms; -webkit-animation-delay: calc(var(--animate-delay)* 6); animation-delay: calc(var(--animate-delay)* 6)} .animate__delay-800ms{-webkit-animation-delay: 800ms; animation-delay: 800ms; -webkit-animation-delay: calc(var(--animate-delay)* 8); animation-delay: calc(var(--animate-delay)* 8)} .animate__delay-1000ms{-webkit-animation-delay: 1000ms; animation-delay: 1000ms; -webkit-animation-delay: calc(var(--animate-delay)* 10); animation-delay: calc(var(--animate-delay)* 10)} .animate__delay-1200ms{-webkit-animation-delay: 1200ms; animation-delay: 1200ms; -webkit-animation-delay: calc(var(--animate-delay)* 12); animation-delay: calc(var(--animate-delay)* 12)} .animate__delay-1400ms{-webkit-animation-delay: 1400ms; animation-delay: 1400ms; -webkit-animation-delay: calc(var(--animate-delay)* 14); animation-delay: calc(var(--animate-delay)* 14)} .animate__delay-1500ms{-webkit-animation-delay: 1500ms; animation-delay: 1500ms; -webkit-animation-delay: calc(var(--animate-delay)* 15); animation-delay: calc(var(--animate-delay)* 15)} .animate__delay-1800ms{-webkit-animation-delay: 1800ms; animation-delay: 1800ms; -webkit-animation-delay: calc(var(--animate-delay)* 18); animation-delay: calc(var(--animate-delay)* 18)} .animate__delay-2300ms{-webkit-animation-delay: 2300ms; animation-delay: 2300ms; -webkit-animation-delay: calc(var(--animate-delay)* 23); animation-delay: calc(var(--animate-delay)* 23)} :root{--animate-duration: 500ms; --animate-delay: 100ms; --animate-repeat: 1} #background-canvas{position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 0} @keyframes full{0%{opacity: 0; stroke-dashoffset: 0} 3.33%{opacity: 0; stroke-width: 2; stroke-dashoffset: 0} 6.66%{opacity: 0; stroke-width: 2; stroke-dashoffset: 0} 9.99%{opacity: 0; stroke-width: 2; stroke-dashoffset: 0} 13.32%{opacity: 0.5; stroke-width: 2; stroke-dashoffset: 0} 16.65%{opacity: 0.5; stroke-width: 15; stroke-dashoffset: 0} 19.98%{opacity: 0.5; stroke-width: 15; stroke-dashoffset: 0} 23.31%{opacity: 0.5; stroke-width: 15; stroke-dashoffset: 0} 26.64%{opacity: 0.5; stroke-width: 15; stroke-dashoffset: 0} 29.97%{opacity: 0.5; stroke-width: 15; stroke-dashoffset: 0} 33.33%{opacity: 0.5; stroke-width: 15; stroke-dashoffset: 0} 36.66%{opacity: 0.5; stroke-width: 15; stroke-dashoffset: 0} 39.99%{opacity: 0.5; stroke-width: 15; stroke-dashoffset: 0} 43.32%{opacity: 0.5; stroke-width: 15; stroke-dashoffset: 0} 46.65%{opacity: 0.5; stroke-width: 15; stroke-dashoffset: 0} 49.98%{stroke-width: 7; stroke-dashoffset: 0} 53.31%{stroke-width: 6; stroke-dashoffset: 0} 56.64%{stroke-width: 5; stroke-dashoffset: 0} 59.97%{stroke-width: 4} 63.33%{stroke-width: 3} 66.66%{stroke-width: 2; opacity: 0.4} 69.99%{stroke-width: 1; opacity: 0.3} 73.32%{stroke-width: 1; opacity: 0.2} 76.55%{stroke-width: 1; opacity: 0.1} 79.98%{stroke-width: 1; opacity: 0} 83.31%{stroke-width: 1; opacity: 0} 86.64%{stroke-width: 1; opacity: 0} 89.97%{stroke-width: 1; opacity: 0} 93.33%{stroke-width: 1; opacity: 0} 96.66%{stroke-width: 1; opacity: 0} 100%{stroke-width: 1; opacity: 0; stroke-dashoffset: 102.96427917480469} } @keyframes scale{0%{transform: scale(1)} 13.32%{transform: scale(1)} 16.65%{transform: scale(1.2)} 23.31%{transform: scale(1)} 100%{transform: scale(1)} } @keyframes shake{0%{transform: translateX(0)} 10%{transform: translateX(-3px)} 20%{transform: translateX(3px)} 30%{transform: translateX(-2px)} 40%{transform: translateX(2px)} 50%{transform: translateX(-1px)} 60%{transform: translateX(1px)} 70%{transform: translateX(0)} 100%{transform: translateX(0)} } .svg-container{width: 100%; height: 100%; top: -160px; left: -10px; margin: 0 auto; position: absolute; text-align: center; &:before{content: ''; display: inline-block; vertical-align: middle; height: 100%; margin-right: -0.25em} .ghosted{display: inline-block; vertical-align: middle} } .lightning-container{width: 20px; transform-origin: 50% 50%; animation: scale 1s ease infinite forwards} .lightningSmall{stroke:gold; stroke-miterlimit:10; fill: gold; stroke-dasharray: 102.96427917480469; stroke-dashoffset: 0; animation: full 1.5s ease-out 2s infinite forwards, shake 1s cubic-bezier(.36,.07,.19,.97) 2s infinite} .site-footer{background-color:#26272b; padding:45px 0 20px; font-size:15px; line-height:24px; color:#737373} .site-footer hr{border-top-color:#bbb; opacity:0.5 } .site-footer hr.small{margin:20px 0 } .site-footer h6{color:#fff; font-size:16px; text-transform:uppercase; margin-top:5px; letter-spacing:2px } .site-footer a{color:#737373} .site-footer a:hover{color:#3366cc; text-decoration:none} .footer-links{padding-left:0; list-style:none } .footer-links li{display:block } .footer-links a{color:#737373 } .footer-links a:active,.footer-links a:focus,.footer-links a:hover{color:gold; text-decoration:none} .footer-links.inline li{display:inline-block } .site-footer .social-icons{text-align:right } .site-footer .social-icons a{width:40px; height:40px; line-height:40px; margin-left:6px; margin-right:0; border-radius:100%; background-color:#33353d } .copyright-text{margin:0 } @media (max-width:991px){.site-footer [class^=col-]{margin-bottom:30px } } @media (max-width:767px){.site-footer{padding-bottom:0 } .site-footer .copyright-text,.site-footer .social-icons{text-align:center } } .social-icons{padding-left:0; margin-bottom:0; list-style:none } .social-icons li{display:inline-block; margin-bottom:4px } .social-icons li.title{margin-right:15px; text-transform:uppercase; color:#96a2b2; font-weight:700; font-size:13px } .social-icons a{background-color:#eceeef; color:#818a91; font-size:16px; display:inline-block; line-height:44px; width:44px; height:44px; text-align:center; margin-right:8px; border-radius:100%; -webkit-transition:all .2s linear; -o-transition:all .2s linear; transition:all .2s linear } .social-icons a:active,.social-icons a:focus,.social-icons a:hover{color:#fff; background-color:#29aafe } .social-icons.size-sm a{line-height:34px; height:34px; width:34px; font-size:14px } .social-icons a.facebook:hover{background-color:#3b5998 } .social-icons a.mailEnvelope:hover{background-color:#00aced } .social-icons a.whatsapp:hover{background-color:seagreen} .social-icons a.phone:hover{background-color:goldenrod} .social-icons a.viber:hover{background-color:#7360f2 } @media (max-width:767px){.social-icons li.title{display:block; margin-right:0; font-weight:600 } } .hidden{opacity: 0} .review-section{margin: auto; padding: 0 1rem; max-width: 1100px; text-align: center} .review-section{padding-top: 100px} .review-title{font-size: 2.5rem; text-transform: uppercase; font-weight: bold; color: rgb(50, 50, 50); margin-bottom: .5rem} .review-note{font-size: 1.3rem; color: rgb(150, 150, 150); color: goldenrod; font-family: 'Helvetica', sans-serif} .review-reviews{margin: 2rem auto; display: flex; flex-wrap: wrap} .review-review{margin: 0 1rem; min-width: 300px; flex: 1} .review-head-review{margin: 1.75rem auto; width: 150px; height: 150px} .review-img{width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 10px 25px rgba(0, 0, 0, .25)} .review-body-review{background-color: rgb(238, 238, 238); padding: 2.5rem; box-shadow: 2px 2px 10px 3px rgb(225, 225, 225)} .review-name-review{font-size: 1.5rem; color: rgb(50, 50, 50); margin-bottom: .25rem; font-weight: bold; font-family: 'Helvetica', sans-serif} .review-place-review{color: goldenrod; font-style: italic; font-weight: 1} .review-rating{color: rgb(253, 180, 42); margin: 1rem 0} .review-desc-review{line-height: 1.5rem; letter-spacing: 1px; color: rgb(150, 150, 150)} @media (max-width: 678px){.review-review{margin-top: 1.5rem} } .review-head-review img{width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 10px 25px rgba(0, 0, 0, .25)} .quality_big_picture img{width:100%; height: auto; max-width: 225px ; max-height: 225px} .quality_small_pictures img{width:90%; height: auto; max-width: 65px ; max-height: 65px} .quality-name{font-family: 'Roboto', sans-serif; font-size: 3rem; font-weight: bold; margin-bottom: 10px} .quality-description{font-family: 'Helvetica', sans-serif; font-size: 1.2rem; font-weight: normal} @media (max-width: 576px){.quality-name{font-size: 2rem} } .quality-section{padding-bottom: 10px} .quality-section .row{margin-right: 0} .row{margin-right: 0; margin-left: 0} .quality-description-small{font-family: 'Helvetica', sans-serif; font-size: 1.2rem; font-weight: normal} .professionals-section{height: 600px; position: relative; margin-top: 100px; margin-bottom: 100px} .professionals-upper-panel{position: absolute; left:200px; width: 300px; height: 300px; background-color: #8282c4; opacity: 0.6 ; z-index: 120} .professionals-image{top: 50px; left:40px; position: absolute; width: 400px; height: 400px; background-image: url('/images/Professionals/Professional.jpg'); background-size: cover; z-index: 130} .professionals-dots-panel{position: absolute; left: -30px; top:220px; width: 300px; height: 300px; background-image: url('/images/Professionals/dots_img.png'); background-size: 120px; background-repeat: repeat; z-index: 120} @media (max-width: 1600px){.professionals-section{height: calc(600px * 0.8)} .professionals-upper-panel{left: calc(200px * 0.8); width: calc(300px * 0.8); height: calc(300px * 0.8)} .professionals-image{top: calc(50px * 0.8); left: calc(40px * 0.8); width: calc(400px * 0.8); height: calc(400px * 0.8)} .professionals-dots-panel{left: calc(-30px * 0.8); top: calc(220px * 0.8); width: calc(300px * 0.8); height: calc(300px * 0.8); background-size: calc(120px * 0.8)} } @media (max-width: 1250px){.professionals-section{height: calc(600px * 0.7)} .professionals-upper-panel{left: calc(200px * 0.7); width: calc(300px * 0.7); height: calc(300px * 0.7)} .professionals-image{top: calc(50px * 0.7); left: calc(40px * 0.7); width: calc(400px * 0.7); height: calc(400px * 0.7)} .professionals-dots-panel{left: calc(-30px * 0.7); top: calc(220px * 0.7); width: calc(300px * 0.7); height: calc(300px * 0.7); background-size: calc(120px * 0.7)} } .professionals-description-sm{} .professionals-photo-sm{height: 500px; width: 100vw} .professionals-upper-panel-sm{position: absolute; left: 50%; width: 200px; height: 200px; background-color: #6c6bc9; opacity: 0.6; z-index: 120} .professionals-image-sm{position: absolute; top: 50px; left: 30%; width: 300px; height: 300px; background-image: url('/images/Professionals/Professional.jpg'); background-size: cover; z-index: 130} .professionals-dots-panel-sm{position: absolute; left: 20%; top:220px; width: 200px; height: 200px; background-image: url('/images/Professionals/dots_img.png'); background-size: 90px; background-repeat: repeat; z-index: 120} @media (max-width: 700px){.professionals-photo-sm{height: calc(500px * 0.9)} .professionals-upper-panel-sm{left: calc(50% * 1); width: calc(200px * 0.9); height: calc(200px * 0.9)} .professionals-image-sm{top: calc(50px * 0.9); left: calc(30% * 0.9); width: calc(300px * 0.9); height: calc(300px * 0.9)} .professionals-dots-panel-sm{left: calc(20% * 0.9); top: calc(220px * 0.9); width: calc(200px * 0.9); height: calc(200px * 0.9); background-size: calc(90px * 0.9)} } @media (max-width: 550px){.professionals-photo-sm{height: calc(500px * 0.9)} .professionals-upper-panel-sm{width: calc(200px * 0.8); height: calc(200px * 0.8)} .professionals-image-sm{top: calc(50px * 0.8); left: calc(30% * 0.8); width: calc(300px * 0.8); height: calc(300px * 0.8)} .professionals-dots-panel-sm{left: calc(20% * 0.8); top: calc(220px * 0.8); width: calc(200px * 0.8); height: calc(200px * 0.8); background-size: calc(90px * 0.8)} } @media (max-width: 450px){.professionals-photo-sm{height: calc(500px * 0.9)} .professionals-upper-panel-sm{width: calc(200px * 0.7); height: calc(200px * 0.7)} .professionals-image-sm{width: calc(300px * 0.7); height: calc(300px * 0.7)} .professionals-dots-panel-sm{width: calc(200px * 0.7); height: calc(200px * 0.7); background-size: calc(90px * 0.7)} } @media (max-width: 350px){.professionals-photo-sm{height: calc(500px * 0.9)} .professionals-upper-panel-sm{left: calc(50% * 0.85); width: calc(200px * 0.6); height: calc(200px * 0.6)} .professionals-image-sm{top: calc(50px * 0.6); left: calc(30% * 0.6); width: calc(300px * 0.6); height: calc(300px * 0.6)} .professionals-dots-panel-sm{left: calc(20% * 0.6); top: calc(220px * 0.6); width: calc(200px * 0.6); height: calc(200px * 0.6); background-size: calc(90px * 0.6)} } @media (max-width: 340px){.professionals-photo-sm{height: calc(500px * 0.9)} } .professionals-name{font-family: 'Roboto', sans-serif; font-size: 3rem; font-weight: bold; margin-bottom: 10px} .professionals-text{font-family: 'Helvetica', sans-serif; font-size: 1.2rem; font-weight: 400; margin-bottom: 10px} @media (max-width: 992px){.professionals-name{font-size: 2.5rem} } @media (max-width: 576px){.professionals-name{font-size: 2rem} } .professionals-styling-bottom-block{height: 180px; width: 50%; background-color: #8282c4; position: absolute; left: 0; top: 50%; opacity: 0.2 !important} .professionals-styling-upper-block{height: 180px; width: 40%; background-color: #87888a; position: absolute; right: 0; top: -10%; opacity: 0.150 !important} @media (max-width: 1420px){.professionals-styling-bottom-block{height: calc(180px * 0.7); top: calc(50% + 20%)} .professionals-styling-upper-block{height: calc(180px * 0.7)} } @media (max-width: 920px){.professionals-styling-bottom-block{height: calc(180px * 0.5); top: calc(50% + 25%)} .professionals-styling-upper-block{height: calc(180px * 0.5)} } .pricing-section{padding-top: 100px} .pricing-section>h2{font-size: 30px; color:#fff} .pricing-section>p{color:rgb(238, 231, 231)} .has-tooltip:not(.tooltip-disabled){cursor: help; position:relative} .has-tooltip:not(.tooltip-disabled):hover .tooltip-container{display: block} .has-tooltip .tooltip-container{display: none; position: absolute; background-color: #05192d; color: #fff; z-index: 20; bottom: calc(100% + 13px); left: -10px; right: -10px; padding: 16px 20px; border-radius: 8px} .has-tooltip .tooltip-container:after{width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #05192d; font-size: 0; line-height: 0; content: ""; position: absolute; bottom: -10px} .has-tooltip .tooltip-container h6{font-weight: 600; font-size: 16px; margin: 0px} .has-tooltip .tooltip-container{color: ghostwhite; margin-top: 4px} .prices-section{padding-top: 80px; padding-bottom: 80px} @media (min-width: 768px) and (max-width: 992px){.prices-section{padding: 20px !important} } @media (max-width: 768px){.prices-section{padding-top: 60px !important} } .prices-section-card{background-color: #33333a; color: #fff; font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif; display: block; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; height: 100%} .prices-section-card:hover{transform: scale(1.01) translateY(-5px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2)} .prices-section-card{background-color: #33333a; color: #fff; font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: center} .prices-section-card > .card-body{display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%} .prices-section-card-list{width: 100%; text-align: left; flex-grow: 1} .prices-section-card-list > ul{list-style-type: none; padding: 0; margin: 0; width: auto; padding-left: 5px} .prices-card-button{width: 200px; height: 45px; background: transparent; border: 1px solid Gold; color: #fff; border-radius: 5px; cursor: pointer; margin: 2em 5em; margin-top: auto} .prices-card-button{width: 200px; height: 45px; background: transparent; border: 1px solid Gold; color: #fff; border-radius: 5px; cursor: pointer; margin: 2em 5em; transition: background-color 0.3s ease, transform 0.3s ease} .prices-card-button:hover{background-color: Gold; color: black; transform: translateY(-5px)} .prices-section-card-list i{color: gold; padding-right: 5px} .prices-section .card-body h5{font-family: 'Roboto', sans-serif; font-size: 2rem; font-weight: bold; margin-bottom: 10px} .card-price-description{color: #888; font-size: 0.8rem} .middle-card{} .card-adv{background-color: gold; width: 100%; padding: 10px} .middle-card .card-body{padding: 0} .middle-card h5{padding-right: 1.25rem; padding-left: 1.25rem} .middle-card p{padding-right: 1.25rem; padding-left: 1.25rem} .middle-card .has-tooltip .tooltip-container{color: ghostwhite; margin-top: 4px; margin-right: 1.25rem; margin-left: 1.25rem} .middle-card h6{font-weight: bold; font-family: 'Roboto', sans-serif; font-size: 1rem; margin-bottom: 10px; color: black} .first-card{height: 550px; padding-top:30px} .first-card .prices-section-card .card-body{background-image: url('/images/BackTextures/BackgroundTexture1.png')} .middle-card{height: 550px} .middle-card .prices-section-card .card-body{background-image: url('/images/BackTextures/BackgroundTexture4.png')} .last-card{height: 550px; padding-top:30px } .last-card .prices-section-card .card-body{background-image: url('/images/BackTextures/BackgroundTexture3.png')} @media (min-width: 992px){.first-card{padding-top: 30px !important} .middle-card{padding-top: 0px !important} .last-card{padding-top: 30px !important} } @media (max-width: 992px){.first-card{height: auto} .middle-card{height: auto} .last-card{height: auto} } @media (max-width: 576px){.first-card{padding-top: 0px !important} .middle-card{padding-top: 30px !important} .last-card{padding-top: 30px !important} } @media (max-width: 768px){.first-card{padding-top: 0px !important}} @media (min-width: 576px){.d-xs-none{display: none}} .middle-card .card-price::after{content: "лв"; font-size: 12px; display: inline-block; color: White} .middle-card .card-name{font-size: 1.5rem !important; padding-top: 1.25rem !important} .middle-card .prices-card-button{margin-top: 22px} .last-card .prices-card-button{margin-top: 22px} .last-card .card-name{font-size: 1.5rem !important} .last-card .card-price{font-size: 1.5rem !important} .leave-comment{background-color: #f9f9f9; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)} .leave-comment h3{color: #333; font-family: 'Roboto', sans-serif; font-size: 2rem; font-weight: bold} .leave-comment h5{color: white; font-family: 'Roboto', sans-serif; font-size: 1.2rem; font-weight: bold; margin-bottom: 0px} .leave-comment label{font-weight: bold; font-family: 'Roboto', sans-serif} .leave-comment .invalid-feedback{font-family: 'Helvetica', sans-serif} .leave-comment .form-control, .leave-comment .form-control-file{border-radius: 0; border: 1px solid #ced4da; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)} .leave-comment .form-control:focus{border-color: #ffd700; box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25)} .leave-comment .btn-primary{background-color: goldenrod; border-color: darkgoldenrod} .leave-comment .btn-primary:hover{background-color: darkgoldenrod; border-color: #8c6707} #animationContainer{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999} #animation{width: 300px; height: 300px} #thankYouMessage{margin-top: 20px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: center; color: #333; font-size: 24px; font-weight: bold} .category-title{margin-top: 20px; margin-bottom: 10px} .table td, .table th{text-align: left} .prices-list-section{padding-top: 120px; padding-bottom: 120px} .prices-list-section-name-div{text-align: center} .GoldenText{color: goldenrod} .additional-services-td{font-size: 22px !important; font-weight: 500} @media (min-width: 1400px){.d-xxl-flex{display:flex!important;}} @media(min-width:1400px){.d-xxl-none{display:none!important}}.bottom-cards-md-lg, .satellite-card { height: 550px; } .bottom-cards-md-lg .card-body, .satellite-card .card-body { padding: 0; } .bottom-cards-md-lg h5, .bottom-cards-md-lg p, .satellite-card h5, .satellite-card p { padding: 0 1.25rem; } .bottom-cards-md-lg .has-tooltip .tooltip-container, .satellite-card .has-tooltip .tooltip-container { color: ghostwhite; margin: 4px 1.25rem 0; } .bottom-cards-md-lg h6, .satellite-card h6 { font-weight: bold; font-family: 'Roboto', sans-serif; font-size: 1.3rem; margin-bottom: 10px; color: black; } .bottom-cards-md-lg .prices-section-card .card-body, .satellite-card .prices-section-card .card-body { background-image: url('/images/BackTextures/BackgroundTexture4.png'); } .bottom-cards-md-lg .card-price::after, .satellite-card .card-price::after { content: "лв"; font-size: 12px; display: inline-block; color: white; } .bottom-cards-md-lg .card-name, .satellite-card .card-name { font-size: 1.5rem !important; padding-top: 1.25rem !important; } .bottom-cards-md-lg .prices-card-button, .satellite-card .prices-card-button { margin-top: 22px; } .satellite-card { height: 520px; margin-top: 30px !important; padding-top: 0 !important; } @media (min-width: 992px) { .bottom-cards-md-lg, .satellite-card { padding-top: 0px !important; } } @media (max-width: 992px) { .bottom-cards-md-lg, .satellite-card { height: auto; } } @media (max-width: 576px) { .bottom-cards-md-lg, .satellite-card { padding-top: 30px !important; } } @media (max-width: 991.98px) { .custom-container { max-width: calc(100% - 30px); margin: 0 auto; } }