/* CSS styles for layout and design */ body {font-family: Arial, Helvetica, sans-serif; line-height: 1.5; margin: 0; padding: 0; } header {background-color: #333; color: #fff; font-weight: 500; padding: 15px; text-align: center; background-image: url("https://s3.amazonaws.com/computer.repair.service/computer-repair-website-header.webp"); text-shadow: 0px 0px 0px black, 0 0 0px white;} .transbox {margin: auto; min-width: 55%; background-color: #000; border: 1px solid black; border-collapse: collapse; border-radius: 5px; opacity: 0.85;} nav {background-color: #990033; color: #fff; padding: 5px; text-align: center; position: sticky; top: 0; z-index: 1; font-size: 18px; display: flex; justify-content: center; align-items: center; gap: 15px; /* space between links */ flex-wrap: wrap; /* in case it gets too wide */} nav a {color: #fff; text-decoration: none; padding: 10px 20px;} nav a:hover {color: #0066ff; text-decoration: none; font-weight: 500; background-color: #e5e5e5;} .h3 {font-size: 16px; font-weight: 700;} .dropdown {position: relative; display: inline-block;} .dropdown-content {display: none; position: absolute; background-color: #ffffff; min-width: 205px; z-index: 1; text-align: left;} .dropdown-content a {color: #000; padding: 5px 5px; display: block; text-align: left; text-decoration: ;} .dropdown:hover .dropdown-content {display: block; color: red; text-decoration: none;} .container {max-width: 1000px; margin: auto; overflow: hidden; padding: 20px;} .services {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; margin-top: 20px;} .service {background-color: #f4f4f4; padding: 10px; border-radius: 5px; text-align: center; flex-basis: calc(30% - 10px); margin-bottom: 20px;} .service img {max-width: 100%; border-radius: 5px; margin-bottom: 10px;} .cta-button {background-color: #0070BD; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; font-size: 18px; cursor: pointer; transition: background-color 0.3s ease; margin: 10px auto; display: block; font-weight: 700;} .cta-button:hover {background-color: #04AA6D;} .appt-button {background-color: #ff9900; color: #242424; padding: 10px 20px; border: none; border-radius: 5px; font-size: 18px; cursor: pointer; transition: background-color 0.3s ease; margin: 10px auto; display: block; font-weight: 700;} .appt-button:hover {background-color: #04AA6D;} .center {margin: auto; width: 50%; padding: 10px;} .middle {margin: auto; width: 85%; padding: 10px;} .terms {text-decoration: none; font-size: 12px; text-align: right; padding-right: 20px;} .terms a {text-decoration: none; color: white; padding: 10px;} .blended-link {text-decoration: none; color: #4e4e4e; font-weight: 600;} .blended-link a {text-decoration: none;} .footersvc {text-decoration: none; font-size: 12px; text-align: center; padding-right: 20px; padding-bottom: 35px;} .footersvc a {text-decoration: none; color: white; padding: 5px;} .footersvc a:hover {text-decoration: underline; color: white;} footer {background-color: #333; color: #fff; padding: 20px; text-align: center; width: ;} .footbox {float: left; width: 27%; background-color: #333; padding: 5px; text-align: center; display: block;} .column2 {float: left; background-color: #fff; padding: 10px; text-align: left; width: 40%; margin-bottom: 20px;} .column3 {float: left; background-color: #fff; padding: 10px; text-align: left; width: 27%; margin-bottom: 10px;} .column4 {float: left; background-color: #fff; padding: 10px; text-align: center; width: 20%; margin-bottom: 10px;} .column5 {float: left; background-color: #fff; padding: 5px; text-align: left; width: 20%; margin-bottom: 5px; width: 100%;} .row:after {content: ""; display: table; clear: both;} .phone{width:1.125em;height:1.025em} .phone path:nth-child(2){animation:header-phone 1s infinite cubic-bezier(0.1, 0.57, 0.5, 1)} .phone path:nth-child(3){animation:header-phone2 1s infinite cubic-bezier(0.1, 0.57, 0.5, 1)} @keyframes header-phone{0%,30%{opacity:0;transform:translate3d(-20px, 20px, 0)}80%{opacity:1;transform:translate3d(0, 0, 0)}100%{opacity:0}} @keyframes header-phone2{0%{opacity:0;transform:translate3d(-20px, 20px, 0)}70%,90%{opacity:1;transform:translate3d(0, 0, 0)}100%{opacity:0}} /* Modal styles */ .modal {display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); padding-top: 10px;} .modal-content {background-color: #fefefe; margin: 5% auto; padding: 10px; border: 1px solid #888; width: 95%; border-radius: 10px;} .close {color: #8b8b8b; float: right; font-size: 32px; font-weight: 700;} .close:hover, .close:focus {color: black; text-decoration: none; cursor: pointer;} @media screen and (max-width: 768px) { .service {flex-basis: calc(50% - 20px);} .footersvc {text-decoration: none; font-size: 12px; text-align: center; padding-right: 20px; padding-bottom: 35px;} .footbox, .column2, .column3, .column4, .column5 {width: 100%;} } @media screen and (max-width: 480px) { .service {flex-basis: 100%;} .footersvc {text-decoration: none; font-size: 12px; text-align: center; padding-right: 20px; padding-bottom: 35px;} .footersvc a {text-decoration: none; color: white; padding: 5px;} .footbox, .column2, .column3, .column4, .column5 {width: 100%;} nav {padding: 0px; width:100%; display: flex; justify-content: center; align-items: center; gap: 10px; /* space between links */ flex-wrap: wrap; /* in case it gets too wide */} nav a {display: inline-block; padding: 10px 0; color: white; text-align: left; font-size: 15px;} .dropdown {position: relative; display: inline-block; font-size: 15px;} /*.dropdown-content {min-width: 100%;}*/ .dropdown-content {display: none; position: absolute; background-color: #ffffff; min-width: 190px; z-index: 1; text-align: left;} .dropdown-content a {color: #000; padding: 7px 5px; display: block; text-align: left; text-decoration: none; font-size: 16px;} .dropdown:hover .dropdown-content {display: block; color: red; text-decoration: none;} } /**/ .topnav {overflow: hidden; background-color: #c00; width: 100%; text-align: center; display: flex; justify-content: center; align-items: center; position: sticky; top: 10px; z-index: 1000;} .topnav a {float: left; display: block; color: #fff; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px;} .active {background-color: #c00; color: white;} .topnav .icon {display: none;} .blink {animation: blinker 0.85s linear infinite; color: #4d4d4d; font-family: sans-serif; font-weight: 700;} @keyframes blinker {75% {opacity: 0;}} /* YT Embed */ lite-youtube {background-color: #000; position: relative; display: block; contain: content; background-position: center center; background-size: cover; cursor: pointer; max-width: 720px;} /* gradient */ lite-youtube::before {content: attr(data-title); display: block; position: absolute; top: 0; /* Pixel-perfect port of YT's gradient PNG, using https://github.com/bluesmoon/pngtocss plus optimizations */ background-image: linear-gradient(180deg, rgb(0 0 0 / 67%) 0%, rgb(0 0 0 / 54%) 14%, rgb(0 0 0 / 15%) 54%, rgb(0 0 0 / 5%) 72%, rgb(0 0 0 / 0%) 94%); height: 99px; width: 100%; font-family: "YouTube Noto",Roboto,Arial,Helvetica,sans-serif; color: hsl(0deg 0% 93.33%); text-shadow: 0 0 2px rgba(0,0,0,.5); font-size: 18px; padding: 25px 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box;} lite-youtube:hover::before {color: white;} /* responsive iframe with a 16:9 aspect ratio thanks https://css-tricks.com/responsive-iframes/ */ lite-youtube::after {content: ""; display: block; padding-bottom: calc(100% / (16 / 9));} lite-youtube > iframe {width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0;} /* play button */ lite-youtube > .lty-playbtn {display: block; /* Make the button element cover the whole area for a large hover/click target… */ width: 100%; height: 100%; /* …but visually it's still the same size */ background: no-repeat center/68px 48px; /* YT's actual play button svg */ background-image: url('data:image/svg+xml;utf8,'); position: absolute; cursor: pointer; z-index: 1; filter: grayscale(100%); transition: filter .1s cubic-bezier(0, 0, 0.2, 1); border: 0;} lite-youtube:hover > .lty-playbtn, lite-youtube .lty-playbtn:focus {filter: none;} /* Post-click styles */ lite-youtube.lyt-activated {cursor: unset;} lite-youtube.lyt-activated::before, lite-youtube.lyt-activated > .lty-playbtn {opacity: 0; pointer-events: none;} .lyt-visually-hidden {clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;} .grow {transition: all .2s ease-in-out;} .grow:hover {transform: scale(1.1);}