* { margin: 0; padding: 0; font-family: nunito, sans-serif } .censervice { max-width: 1200px; margin: auto; overflow: hidden; padding: 20px } .landing-page { width: 100%; height: 70vh; background: #000; position: relative; overflow: hidden; } .landing-page::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(bh.png) no-repeat; background-size: cover; opacity: .3 } @keyframes anim { 50% { transform: scale(1.2) } 100% { transform: scale(1) } } .page-content { position: relative; top: 35vh; left: 50%; transform: translate(-50%, -50%); z-index: 1; width: 100%; max-width: 800px; text-align: center; box-sizing: border-box; } .page-content img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: 200px } .page-content img:hover { opacity: .8 } .page-content h1 { color: #fff; font-size: 45px; font-weight: 700; text-shadow: 0 0 20px rgba(0, 0, 0, .41); } .page-content p { color: #fff; text-shadow: 0 0 20px rgba(0, 0, 0, .41); font-size: 18px; } .page-content a { display: inline-block; text-decoration: none; color: #059ced; border: 2px solid #059ced; text-transform: uppercase; padding: 10px 20px; transition: .4s linear } .page-content a:hover { color: #fff; background: #059ced } .text { padding: 10px; text-align: justify } .text div { margin-bottom: 6px } .eventsup h2 { font-size: 20px; padding-bottom: 10px; text-align: center; margin-top: 25px } .img-col { content: ""; display: block; clear: both; margin-top: 15px } .text-left a { font-size: 14px; background-color: #059ced; color: #fff; display: inline-block; padding: 12px 30px; border-radius: .3rem; margin-top: 15px; text-decoration: none; cursor: pointer; transition: background-color .3s; box-shadow: 0 8px 18px rgba(0, 0, 0, .04) } .text-left a:hover { background-color: #056fb5 } .text-left h4 { font-style: italic; font-weight: 500; color: #2660fd; margin-bottom: 10px; } .text-left { width: 50%; float: left } .text-left p { padding: 0 30px 0 0; font-size: 14px } .text-left h3 { color: #2660fd; font-weight: 700; } .right-picture { float: right; width: 50% } .right-picture img { max-width: 100%; border-radius: 10px; box-shadow: 0 42px 64px 0 #e7e7ec; transition: transform .5s ease-in-out; } .right-picture img:hover { transform: scale(1.02) rotate(1deg); border-radius: 10px } .text-right { width: 50%; float: right } .text-right p { padding: 0 0 0 30px; font-size: 14px } .text-right h4 { padding: 0 0 0 30px; font-style: italic; font-weight: 500; color: #2660fd; margin-bottom: 10px; } .left-picture { float: left; width: 50% } .left-picture-panel { float: left; width: 50% } .left-picture img { max-width: 100%; border-radius: 10px; box-shadow: 0 4px 16px 0 rgba(19, 26, 44, .02), 0 0 32px 0 rgba(19, 26, 44, .1); transition: transform .5s ease-in-out } .left-picture img:hover { transform: scale(1.02) rotate(1deg); border-radius: 10px } .left-picture-panel img { max-width: 100%; border-radius: 10px; box-shadow: 0 4px 16px 0 rgba(19, 26, 44, .02), 0 0 32px 0 rgba(19, 26, 44, .1) } .text-right h3 { padding: 0 0 0 30px; color: #2660fd; font-weight: 700; } @media screen and (max-width:860px) { .text-right { width: 100% } .left-picture { width: 100%; float: right; margin-top: 10px } .left-picture-panel { width: 100%; float: right } } .text-right a { font-size: 14px; background-color: #059ced; color: #fff; display: inline-block; padding: 12px 30px; border-radius: .3rem; text-decoration: none; cursor: pointer; transition: background-color .3s; margin: 15px 0 0 30px; box-shadow: 0 8px 18px rgba(0, 0, 0, .04) } .text-right a:hover { background-color: #a32121 } @media screen and (max-width:860px) { .text-left { width: 100% } .right-picture { width: 100%; float: left; margin-top: 10px } .text-right h3 { padding: 0 } .text-right h4 { padding: 0 } .text-right a { margin: 15px 0 0 } .text-right p { padding: 0 } } .testimonials { background: #ebebec; text-align: left; } .testimonials h1 { display: inline-block; border-bottom: 3px solid #2660fd; font-size: 20px; padding-bottom: 5px; } .testimonials p { font-size: 13px; padding: 15px 0 } .row { display: flex; flex-wrap: wrap; justify-content: center; text-align: left } .col { flex: 33.33%; max-width: 33.33%; box-sizing: border-box; padding: 10px; margin: 0 -2px } .testimonial { background: #fff; padding: 15px; transition: .4s; border-radius: 15px; box-shadow: 0 42px 64px 0 #e7e7ec; } .testimonial img:hover { transform: scale(1.1) rotate(3deg); border-radius: 10px } .testimonial img { width: 75px; box-shadow: 0 8px 18px rgba(0, 0, 0, .04); height: 75px; float: right; border-radius: 10px; transition: transform .4s ease-in-out } .name { font-size: 20px; font-weight: 700; display: block; margin: 2px 0 0; color: #2660fd; } .pricing { font-size: 16px; font-weight: 700; display: block; font-style: italic; margin-bottom: 20px } .stars { color: #059ced } .cen { max-width: 1200px; margin: auto; overflow: hidden; text-align: center; padding: 10px 0; } .testimonial li { list-style-type: none; margin-top: 2px; font-size: 13px; float: none } .testimonial i { margin-right: .2em; color: #2660fd; } .testimonial a { font-size: 13px; font-weight: 600; background-color: #2660fd; color: #fff; display: inline-block; padding: 10px 25px; border-radius: 5px; margin-top: 15px; text-decoration: none; cursor: pointer; transition: background-color .3s; box-shadow: 0 8px 18px rgba(0, 0, 0, .04); } .testimonial a:hover { background-color: #4070f1; } .strong1 { color: #366af8; font-weight: 700; } @media screen and (max-width:1100px) { .col { flex: 50%; max-width: 48% } } @media screen and (max-width:860px) { .col { flex: 100%; max-width: 90% } } .fas.fa-globe-americas { color: #fff } .fas.fa-star { color: #fff } nav { height: 70px; background: #fff; z-index: 2; position: fixed; top: 0; width: 100%; box-shadow: 0 8px 18px rgba(0, 0, 0, .04) } nav img { position: absolute; width: 190px; top: 12px; left: 6% } nav ul { float: right; margin-right: 6%; z-index: 2 } nav ul li { display: inline-block; line-height: 70px; margin: 0 6px } nav ul li a { position: relative; padding: 5px 0; color: #000; font-weight: 600; font-size: 18px; text-decoration: none; transition: color .3s } nav ul li a:hover { color: #0860c2 } label #btn, label #cancel { font-size: 30px; color: #000; float: right; line-height: 70px; margin-right: 40px; cursor: pointer; display: none } #check { display: none } @media(max-width:1118px) { nav img { left: 8% } } @media(max-width:944px) { nav img { width: 130px; top: 20px; left: 6% } nav ul li a { font-size: 17px } } @media(max-width:860px) { label #btn { display: block } ul { position: fixed; width: 100%; height: 100vh; background: #fff; top: 60px; left: -100%; text-align: center; transition: all .5s } nav ul li { display: block; margin: 50px 0; line-height: 30px } nav ul li a { font-size: 20px } #check:checked~ul { left: 0 } #check:checked~label #btn { display: none } #check:checked~label #cancel { display: block } } .footer-basic-centered { background-color: #2660fd; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .12); box-sizing: border-box; width: 100%; text-align: center; padding: 10px; } .footer-basic-centered .footer-company-name { color: #fff; font-size: 15px; margin-top: 15px; margin-bottom: 5px; } .footer-basic-centered img { max-width: 220px; transition: .4s; margin: 0 0 15px } .footer-basic-centered .footer-company-name a { text-decoration: none; font-weight: 700; color: #fff; letter-spacing: 1px } .footer-basic-centered img:hover { transform: scale(1.1) } .footer-basic-centered .footer-links { font-weight: 700; color: #fff; font-size: 18px; text-decoration: none; letter-spacing: .2px; transition: color .3s; } .footer-basic-centered .footer-links a { display: inline-block; text-decoration: none; color: inherit; font-size: 16px; margin: 0 8px 0 0; } .footer-basic-centered .footer-links a:hover { text-decoration: underline } @media(max-width:600px) { .footer-basic-centered { padding: 35px } .footer-basic-centered .footer-company-motto { font-size: 18px } .footer-basic-centered .footer-company-name { font-size: 12px } .footer-basic-centered .footer-links { font-size: 14px; margin: 0 12px 0 0 } .footer-basic-centered .footer-links a { line-height: 1.8 } } .score h2 { color: #2660fd; text-align: center; font-weight: 700; } .score p { text-align: center } .mcadbanner { width: 48%; border-radius: 15px; max-width: 48%; padding: 10px; } @media(max-width:1100px) { .mcadbanner { width: 46%; max-width: 46% } } @media(max-width:860px) { .mcadbanner { width: 87%; max-width: 87% } } @media(max-width:1100px) { .page-content { padding: 20px } } .advtag { border: 2px solid #2660fd; background-color: #fff; color: #000; padding: 12px 10px; margin-top: 15px; font-size: 11px; font-weight: 700; text-align: center; text-decoration: none; border-radius: 50%; float: right; } .specsinfo{ display: inline-block; width: calc(100% / 3); margin: 0 -2px; padding: 15px; box-sizing: border-box; cursor: pointer; transition: 0.4s; border-radius: 10px; text-align: center; } .specsinfo li{ list-style-type: none; margin-top: 3px; font-size: 15px; } .col1{ flex: 33.33%; max-width: 33.33%; box-sizing: border-box; padding: 15px; } .specsinfo:hover{ background: #fff; border-radius: 10px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04) } .specsinfo i{ color: #2E90F9; margin-right: .5em; } .specsinfo h2{ font-size: 20px; font-weight: 700; color: #2660fd; } .specsinfo h3{ font-size: 17px; font-weight: 500; color: #000; margin-bottom: 25px; } .specsinfo p{ color: #000; font-size: 14px; } .specsinfo img{ width: 100px; height: 100px; } .specsinfo a { font-size: 16px; background-color: #2E90F9; font-weight: 700; color: white; display: inline-block; padding: 12px 30px; border-radius: .3rem; margin-top: 15px; text-decoration: none; cursor: pointer; transition: background-color 0.3s; letter-spacing: 1.2px; } .specsinfo a:hover { background-color: #0860C2; } @media screen and (max-width: 800px) { .specsinfo{ width: 50%; } } @media screen and (max-width: 500px) { .specsinfo{ width: 100%; } } .specs{ background: #f8f9fa; text-align: center; } .specs h1{ display: inline-block; border-bottom: 3px solid #2660fd; font-size: 20px; padding-bottom: 5px; margin-top: 20px; }