.CDSRed{ color:#690A30; } .CDSBlue{ color:#3C2A6F; } .BackgroundBlue{ color:#281C3C; } .center{ text-align:center; margin:0px auto 20px; } h1{ text-transform:uppercase; color:#690A30; font-size:30px; text-align:center; } h2{ text-transform:uppercase; font-size:27px; color:#3C2A6F; font-family:'Anurli Bold',Arial,sans-serif; } h4{ font-family:'Anurli Bold',Arial,sans-serif; text-transform:uppercase; } a{ text-decoration:none; color:#281C3C; text-transform:uppercase; font-weight:700; font-family:'Anurli Bold',Arial,sans-serif; } a:hover{ color:#3C2A6F; } ul,ol{ text-align-last:left; } html,body{ height:100%; margin:0; } body{ font-family:'Arvin Regular',Arial,sans-serif; margin:0; padding:0; color:#281c3c; font-size:16px; background-color:#ffffff; width:100%; display:flex; flex-direction:column; text-align:justify; text-align-last:center; } .container{ width:70vw; max-width:950px; margin:0 auto; position:relative; } header{ background:#281c3c url('../images/backgrounds/CDS Header.jpg') top center no-repeat; background-size:cover; background-attachment:fixed; color:white; width:100%; position:relative; z-index:1000; } .top-menu{ position:fixed; top:0; width:100%; z-index:1000; height:7vw; max-height:100px; min-height:70px; background:transparent url('../images/backgrounds/CDS Header.jpg') top center no-repeat; background-size:cover; background-attachment:fixed; } .bottom-header{ padding-top:100px; width:100%; height:400px; display:flex; justify-content:center; align-items:center; position:relative; z-index:999; } .bottom-header img{ padding:0 0 40px; width:270px; height:auto; } .support-number{ position:absolute; background-color:#690A30; color:#FFF; text-align:center; font-family:'Anurli Bold',Arial,sans-serif; font-size:min(1.6vw,20px); padding:1vw 1.8vw 0.8vw; right:1.8vw; top:0; left:auto; z-index:114; box-shadow:2px 3px 3px #000; } .support-number p{ margin:0; } .support-number a{ color:#FFF; font-weight:100; } header nav{ padding:1.3vw 0 0; position:relative; z-index:1013; width:70%; margin:0 auto; } header nav ul{ list-style-type:none; padding:0; display:flex; justify-content:center; margin:5px; text-align-last:center; } header nav ul li{ position:relative; margin:0; } header nav ul li a{ color:white; font-size:min(2vw,20px); text-decoration:none; padding:10px 3vw 5px; display:block; font-family:'Anurli Bold',Arial,sans-serif; text-transform:uppercase; border-radius:3px; text-shadow:2px 2px 7px rgba(0,0,0,0.5); } header nav ul li a:hover{ color:#690A30; text-shadow:none; } .activeMenu{ color:#ffffff81; } .dropdown-content{ display:none; position:absolute; background-color:rgba(40,28,60,0.9); min-width:200px; z-index:1025; } .dropdown-content a{ color:#FFF; padding:12px 16px 7px; text-decoration:none; display:block; text-align:center; font-family:'Anurli Bold',Arial,sans-serif; text-transform:uppercase; font-size:16px; } .dropdown-content a:hover{ background-color:#ddd; } .dropdown:hover .dropdown-content{ display:block; } header nav ul li a:hover{ background-color:#fff; color:#3c2a6f; } .hamburger{ display:none; font-size:40px; cursor:pointer; color:white; position:absolute; right:30px; } .logo{ position:absolute; left:30px; top:0px; } .logo img{ height:auto; width:10vw; min-width:120px; } main{ flex:1; transition:margin-top 0.5s ease-in-out; } .main-pushdown{ padding-top:calc(53vh - 100px); } .intro{ padding:30px 20px 0; position:relative; } .intro ul{ list-style:none; margin:0; padding:0; display:flex; justify-content:center; gap:5vw; text-align:center; text-align-last:center; } .intro ul li,.intro ul li h1{ text-align:center; font-family:'Anurli Bold',Arial,sans-serif; font-size:min(2.4vw,28px); text-transform:uppercase; margin:0; } .intro::after{ content:""; display:block; width:50%; height:2px; background-color:#3c2a6f; margin:40px auto 0 auto; } .taglines{ text-align:center; padding:10px 20px 10px; position:relative; } .taglines ul{ list-style:none; margin:0; padding:0; display:flex; justify-content:center; gap:8vw; text-align:center; } .taglines ul li,.taglines ul li h1{ text-align:center; font-family:'Anurli Bold',Arial,sans-serif; font-size:min(2.4vw,20px); text-transform:uppercase; margin:0; } .services-title{ padding:30px 0 10px; text-align:center; font-family:'Anurli Bold',Arial,sans-serif; } .services-title h1{ padding:0; margin:0; } .contact h1{ padding:20px 0 0; margin:0; } .services-img{ padding:20px 0 0; margin:0 auto; } .services{ padding:20px 20px 0; } .services h2{ text-align:center; } .services::after{ content:""; display:block; width:50%; height:2px; background-color:#690A30; margin:40px auto 0 auto; } .services-page{ padding:0 20px; } .services-page::after{ display:none; } .services-page .intro::after{ display:none; } .services-page ul{ width:60vw; margin:0 auto; text-align:justify; text-align-last:left; } .services h2{ margin:20px 0; } .service-item p{ font-family:'Anurli Bold',Arial,sans-serif; text-transform:uppercase; margin:0; color:#3C2A6F; } .service-item a:hover>p{ color:#690A30; } .service-item .RedText{ color:#690A30; } .service-item a:hover>.RedText{ color:#3C2A6F; } .service-icons{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(4,auto); justify-items:center; align-items:center; width:850px; position:relative; gap:20px; margin:20px auto; } .top-center{ grid-column:2 / 3; grid-row:1; margin-bottom:-100px; } .left-above-center{ grid-column:1 / 2; grid-row:2; margin-right:-10vw; } .right-above-center{ grid-column:3 / 4; grid-row:2; margin-left:-10vw; } .center-logo{ grid-column:2 / 3; grid-row:3; } .left-below-center{ grid-column:1 / 2; grid-row:3; margin-right:-0vw; } .right-below-center{ grid-column:3 / 4; grid-row:3; margin-left:-0vw; } .bottom-left{ grid-column:1 / 2; grid-row:4; margin-right:-20vw; } .bottom-right{ grid-column:3 / 4; grid-row:4; margin-left:-20vw; } .service-item{ text-align:center; cursor:pointer; position:relative; } .service-item p{ font-family:'Anurli Bold',Arial,sans-serif; text-transform:uppercase; margin-top:10px; color:#3C2A6F; } .service-item img{ width:auto; height:90px; } .service-item a:hover p{ color:#690A30; } .success-story{ padding:20px; max-width:900px; margin:0 auto; } .story-content{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; margin:0px auto 20px; border-top:2px solid #3C2A6F; padding:40px 0 0; } .services-page .story-item{ flex:1; max-width:450px; margin-left:20px; text-align:center; } .services-page .story-item img{ max-width:160px; } .services-page .story-text{ font-weight:100; font-family:'Arvin Regular',Arial,sans-serif; text-transform:none; max-width:400px; padding:0 10px; margin:0 auto; } .services-page .story-title{ width:100%; font-weight:bold; margin:10px 0 10px; font-family:'Anurli Bold',Arial,sans-serif; text-transform:uppercase; } .services-page .popup-button{ position:absolute; top:-40px; right:30px; } .servicesText{ margin:0 auto 0px; padding:0 0 20px; } .services-page .client-services{ width:auto; text-align:center; } .video-preview{ flex:2; max-width:400px; } .video-container{ position:relative; width:100%; height:0; padding-bottom:56.25%; } .video-placeholder{ position:absolute; top:0; left:0; width:100%; height:100%; cursor:pointer; } iframe{ position:absolute; top:0; left:0; width:100%; height:100%; } #toggleText{ cursor:pointer; } .testimonial{ margin-top:20px; text-align:center; } .testimonial .container{ width:50vw; color:#690A31; font-weight:900; } .client-role{ margin:10px 0 0; font-weight:bold; text-transform:uppercase; color:#3C2A6F; } .case-study{ margin-top:20px; line-height:1.4; } .case-study h3{ color:#690A30; } .short-text{ display:block; } .full-text{ display:none; } .read-more{ margin:20px 0; text-align:center; } .read-more a{ text-decoration:none; color:#690A31; font-weight:bold; text-transform:uppercase; padding:8px 10px 5px; border-radius:3px; } .read-more a:hover{ background-color:#3C2A6F; color:#FFF; text-decoration:none !important; } .policy ol{ text-align-last:left; } .aboutText{ margin-bottom:20px; } .about-title{ padding:10px 0 10px; text-align:center; font-family:'Anurli Bold',Arial,sans-serif; color:#690A30; text-transform:uppercase; } .about-title h1{ padding:0; margin:0; color:#3C2A6F; } .about-page h2{ color:#3C2A6F; text-align:center; text-transform:uppercase; } .about-page h3{ color:#281C3C; text-align:center; text-transform:uppercase; font-size:22px; font-family:'Anurli Bold',Arial,sans-serif; } .successStoryDetail .video-preview{ margin:0 auto; width:500px; max-width:none; } .successStoryLinks{ position:relative; width:90%; margin:20px auto 0; text-align:center; } .successStoryLinks ul{ list-style:none; width:100%; margin:0; padding:0; display:flex; justify-content:space-between; align-items:center; } .successStoryLinks ul li{ width:max-content; padding:4px 10px 6px; text-align-last:center; } .successStoryLinks a{ color:#3C2A6F; text-decoration:none; font-family:'Anurli Bold',Arial,sans-serif; font-size:18px; text-transform:uppercase; cursor:pointer; } .successStoryLinks a:hover{ opacity:0.3; } .success-title{ padding:20px 0 0px; text-align:center; } .success-title h1{ color:#690A30; font-family:'Anurli Bold',Arial,sans-serif; } .arrow{ width:40px; height:40px; background-image:url('../images/arrow.svg'); background-size:contain; background-repeat:no-repeat; cursor:pointer; transition:background-image 0.3s ease; } .left-arrow{ transform:rotate(180deg); } .arrow:hover{ background-image:url('../images/arrowinverted.svg'); } .moresuccess{ background-image:url("../images/IT SUCCESS BUTTON.png"); background-position:center; background-repeat:no-repeat; background-size:contain; color:white; font-size:20px; height:45px; padding:12px 13px 7px; text-decoration:none; } .moresuccess:hover{ background-image:url("../images/IT SUCCESS BUTTON Invert.png"); color:#fff; } .profiles{ text-align:center; } .profiles h2{ color:#690A30; max-width:60vw; border-top:2px solid #690A30; margin:10px auto 0; padding:25px 0 0; } .profile-container{ position:relative; display:flex; align-items:flex-start; justify-content:center; overflow-x:hidden; width:100%; margin:20px auto 40px; } .profile-content-staff{ display:grid; position:relative; align-items:flex-start; overflow-x:hidden; padding:0 20px; max-width:900px; width:100%; min-height:270px; grid-template-areas:"testimonial"; } .profile-content{ display:grid; position:relative; align-items:flex-start; overflow-x:hidden; padding:0 20px; max-width:900px; width:100%; grid-template-areas:"testimonial"; } .profile-image{ flex:0 0 250px; margin-right:20px; text-align:center; align-self:flex-start; } .profile-image img{ width:100%; } .team-name{ font-family:'Anurli Bold',Arial,sans-serif; font-size:18px; color:#B40E35; margin:10px 0 0; font-weight:bold; text-transform:uppercase; } .team-position{ font-size:18px; margin:0 0 20px; } .profile-info{ flex:1; font-size:14px; line-height:1.6; text-align:left; } #profile-content .profile-info{ text-align:center; } .profile-info strong{ color:#3C2A6F; font-size:15px; text-transform:uppercase; margin:0 5px 0 0; } .profile-info .testimonial-text{ padding:0; } .testimonial-author{ color:#3C2A6F; text-transform:uppercase; font-family:'Anurli Bold',Arial,sans-serif; font-size:15px; } .cds_team p{ font-size:25px; color:#690A30; padding:0px 0 20px; font-family:'Anurli Bold',Arial,sans-serif; text-transform:uppercase; margin:20px 0 0; } .getintouchtext{ padding:20px 0 0; font-size:18px; text-align:center; border-top:2px solid #3C2A6F; } .content-wrapper{ max-width:60vw; margin:0 auto; padding:0 20px 20px; } .full-width-text{ width:100%; margin-bottom:0px; } .full-width-text p{ line-height:1.6; margin-top:0; } .columns{ display:flex; justify-content:space-between; align-items:center; margin-bottom:0px; gap:20px; } .text-column{ flex:1; } .text-column p{ line-height:1.6; } .image-column{ flex:1; padding:20px; } .image-column img{ width:100%; max-width:400px; height:auto; border-radius:5px; object-fit:cover; } .columns.reverse{ flex-direction:row-reverse; } .clients{ padding:20px 20px; } .clients h2{ margin:20px 0; text-align:center; } .client-logos{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:30px; } .client-item{ position:relative; text-align:center; } .client-item a,.testimonial-item a{ width:100%; height:100%; } .client-item p,.testimonial-item p{ text-transform:uppercase; font-family:'Anurli Bold',Arial,sans-serif; width:100%; margin:0; padding:0; } .client-item ul,.testimonial-item ul{ list-style:none; margin:0; padding:0; font-size:15px; } .client-item ul li,.testimonial-item ul li{ padding:1px 0; text-align-last:center; } .client-item img{ width:auto; } .testimonial-item{ grid-area:testimonial; min-width:100%; min-height:150px; transition:transform 0.5s ease,opacity 0.5s ease; opacity:0; position:relative; top:0; left:0; display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start; } .testimonial-item p{ text-transform:none; font-family:inherit; width:100%; margin:0; padding:0; } .profile-image p{ text-transform:uppercase; font-family:'Anurli Bold',Arial,sans-serif; width:100%; margin:0; padding:0; } .testimonial-item.active{ opacity:1; left:0; position:relative; transform:translateX(0); } .testimonial-item.slide-out-to-left{ transform:translateX(-100%); opacity:0; } .testimonial-item.slide-in-from-right{ transform:translateX(100%); opacity:0; } .client-item img:hover{ filter:grayscale(100%); } .testimonial{ margin:40px auto 20px; position:relative; width:100%; } .testimonial-content{ position:relative; max-width:70%; margin:0 auto; padding:20px; } .speechbubble{ position:relative; background:#fff; border-radius:15px; border:#690A30 2px solid; padding:20px; box-shadow:0 3px 10px rgba(0,0,0,0.1); min-height:50px; max-width:800px; margin:0 auto; } .speechbubble::after{ content:''; position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:15px solid transparent; border-right:15px solid transparent; border-top:15px solid #690A30; filter:drop-shadow(0 3px 2px rgba(0,0,0,0.1)); } .speechbubble::before{ content:''; position:absolute; bottom:-14px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; border-top:14px solid #fff; z-index:1; } #testimonial-text{ margin:0; line-height:1.5; color:#333; } .client{ margin-top:30px; text-align:right; padding-right:20px; } .speechbubble{ transition:opacity 0.5s ease-in-out; } .rotating-image{ width:auto; height:120px; transition:opacity 1s ease-in-out; opacity:1; position:absolute; left:50%; transform:translateX(-50%) } .hidden{ opacity:0; z-index:1; } .image-wrapper{ position:relative; width:100%; height:120px; display:flex; justify-content:center; align-items:center; overflow:hidden; } .junk-mail-container{ text-align:center; margin:0 auto; padding:20px; border-top:2px solid #690A30; border-bottom:2px solid #3C2A6F; } .junk-mail-container .title{ color:#690a30; font-size:28px; font-family:'Anurli Bold',Arial,sans-serif; text-transform:uppercase; margin-bottom:10px; } .junk-mail-container .description{ font-size:16px; line-height:1.6; color:#333; margin-bottom:20px; } .junk-mail-form{ display:flex; flex-direction:column; align-items:center; } .junk-mail-form .radio-group{ display:flex; justify-content:center; gap:20px; margin-bottom:20px; } .junk-mail-form .radio-group label{ font-size:14px; color:#690a30; font-family:'Anurli Bold',Arial,sans-serif; cursor:pointer; } .radio-group span{ padding:7px 0 0; } .form-group{ display:flex; align-items:center; gap:10px; margin-bottom:20px; } .form-group1{ text-align:left; } .form-group label{ font-size:16px; font-family:'Anurli Bold',Arial,sans-serif; color:#690a30; } .form-group input[type="email"]{ width:40vw; padding:8px; border:1px solid #ccc; border-radius:5px; font-size:16px; } .submit-section{ display:flex; justify-content:center; } .submit-btn{ background-image:url("../images/GIT.png"); background-position:top left; background-repeat:no-repeat; background-size:cover; color:white; border:none; border-radius:5px; padding:10px 20px 7px; font-size:18px; font-family:'Anurli Bold',Arial,sans-serif; cursor:pointer; text-transform:uppercase; } .submit-btn:hover{ background-image:url("../images/GITInvert.png"); } .submit-btn:before{ content:url("../images/GITInvert.png"); visibility:hidden; position:absolute; height:0; width:0; overflow:hidden; } .news-section{ text-align:center; padding:0px; max-width:900px; } .section-title{ font-size:32px; font-family:'Anurli Bold',Arial,sans-serif; color:#690A30; text-transform:uppercase; margin-bottom:20px; } .news-categories{ margin:0 auto 30px; width:70%; display:flex; justify-content:space-between; align-items:center; } .news-categories a{ text-decoration:none; color:#3C2A6F; font-weight:bold; text-transform:uppercase; width:max-content; } .news-categories a:hover{ color:#690A30; } .news-categories .ShowAll{ color:#690A30; } .news-item{ display:flex; justify-content:space-between; align-items:center; margin-bottom:40px; padding:20px 0 0; } .news-item.reverse{ flex-direction:row-reverse; } .border-top{ border-top:1px solid #690A30; } .news-image img{ width:300px; height:auto; } .news-content{ width:60%; text-align:center; padding:0 20px; } .news-content h3{ font-size:20px; color:#3C2A6F; font-family:'Anurli Bold',Arial,sans-serif; text-transform:uppercase; } .newsCategory{ color:#690A30; } .news-content p{ font-size:18px; color:#000; } .read-more{ text-decoration:none; color:#690A30; font-weight:bold; text-transform:uppercase; } .pagination{ display:flex; justify-content:center; margin:20px 0; } .pagination a{ color:#3C2A6F; padding:10px 15px; text-decoration:none; border:1px solid #ddd; margin:0 5px; text-transform:uppercase; } .pagination a:hover{ background-color:#f0f0f0; } .pagination a.active{ background-color:#690A30; color:white; border:1px solid #690A30; } #feedback{ margin-top:20px; padding:15px; font-size:16px; border-radius:5px; display:none; } #feedback.success{ background-color:#28a745; border:1px solid #218838; } #feedback.error{ background-color:#dc3545; border:1px solid #c82333; } #feedback.warning{ background-color:#ffc107; border:1px solid #e0a800; color:#333; } @keyframes fadeIn{ from{opacity:0} to{opacity:1} } .fade-in{ animation:fadeIn 0.5s ease-in; } .contact-form-container{ width:90%; max-width:800px; margin:0 auto 20px; border:3px solid #690A30; padding:20px; border-radius:3px; } .contact-form{ display:flex; flex-direction:column; position:relative; text-align-last:left; } .contact-form .form-group{ margin-bottom:5px; display:flex; align-items:center; } .contact-form .form-group1{ margin-bottom:5px; align-items:center; } .contact-form .form-group label,.contact-form .form-group1 label{ font-weight:bold; font-size:16px; color:#3C2A6F; display:block; margin-bottom:5px; margin-right:10px; text-transform:uppercase; padding:10px 0 0; } .contact-form .form-group input[type=text], .contact-form .form-group input[type=email], .contact-form .form-group input[type=tel]{ flex:1; padding:5px 10px; border:1px solid #ccc; border-radius:3px; font-family:'Arvin Regular',Arial,sans-serif; } .contact-form textarea{ resize:vertical; width:100%; padding:5px 10px; border:1px solid #ccc; border-radius:3px; box-sizing:border-box; font-family:'Arvin Regular',Arial,sans-serif; } .contact-form .checkbox-group{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 0 10px; } .contact-form .checkbox-group label{ display:flex; align-items:center; font-size:12px; color:#690A30; width:160px; padding:0; } .contact-form .checkbox-group input{ margin-right:5px; } .contact-form .form-group input[type="radio"]{ margin-right:5px; width:auto; } .contact-form .form-group .radio-group{ display:flex; align-items:center; font-size:12px; color:#690A30; width:60px; padding:0; } .contact-form .form-group input[type="checkbox"]{ width:auto; } .submit-section{ display:flex; justify-content:center; } .submit-section button{ background-image:url("../images/GIT.png"); background-position:top left; background-repeat:no-repeat; background-size:cover; color:white; padding:10px 20px 7px; border:none; border-radius:5px; font-size:18px; cursor:pointer; text-transform:uppercase; font-family:'Anurli Bold',Arial,sans-serif; margin:10px 0 0; } .submit-section button:hover{ background-image:url("../images/GITInvert.png"); } .captcha-container{ position:relative; width:310px; margin:0 auto; } .captcha{ font-size:16px; color:#555; } .cloudflare{ font-size:12px; color:#555; } .social-media{ margin:30px 0; text-align:center; } .social-media p{ font-size:14px; margin-bottom:10px; } .social-icons{ display:flex; justify-content:center; gap:10px; } .social-icon{ background-image:url("../images/SB.png"); background-position:top left; background-repeat:no-repeat; background-size:cover; color:white; padding:10px 10px 7px; border-radius:3px; text-decoration:none; } .social-icon:hover{ background-image:url("../images/SB Invert.png"); } .social-icon.linkedin::before{ display:inline-block; margin-right:5px; } .social-icon.facebook::before{ display:inline-block; margin-right:5px; } .social-icon.x::before{ display:inline-block; margin-right:5px; } .social-icon.phone::before{ display:inline-block; font-size:18px; margin-right:5px; } .contactFeedback{ text-align:center; font-size:18px; } .success-stories{ max-width:60vw; margin:0 auto; text-align:center; padding:20px; border-top:2px solid #3C2A6F; } .filter-links{ margin-bottom:20px; display:flex; justify-content:center; flex-wrap:wrap; } .filter-link{ color:#3C2A6F; text-transform:uppercase; text-decoration:none; font-size:14px; margin:0 10px; cursor:pointer; padding:5px; font-family:'Anurli Bold',Arial,sans-serif; } .filter-link:hover{ color:#B40E35; } .show-all{ color:#B40E35; font-weight:bold; } .video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .video-item{ display:flex; flex-direction:column; align-items:center; text-align:center; } .video-thumbnail{ width:100%; height:150px; border-radius:15px; position:relative; overflow:hidden; background-color:#3C2A6F; } .video-thumbnail img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; } .vt-red{ background-color:#690A30; } .video-thumbnail:hover{ background-color:#B40E35; } .vt-red:hover{ background-color:#281C3C; } .play-icon{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; font-size:50px; color:white; cursor:pointer; pointer-events:none; } .video-thumbnail:hover .play-icon{ color:#f0f0f0; } .video-item p{ margin-top:10px; font-size:16px; color:#3C2A6F; font-weight:bold; text-transform:uppercase; } .popup-overlay{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.7); z-index:1000; justify-content:center; align-items:center; } .vt-popup-content{ background-color:white; padding:20px; border-radius:10px; width:560px; height:270px; max-width:90%; text-align:center; position:absolute; top:50%; transform:translateY(-50%); } #vt-close-popup{ position:absolute; top:-20px; right:5px; font-size:54px; color:#333; cursor:pointer; z-index:5; } #video-frame{ width:100%; height:315px; } .technews-page{ margin-top:0px; width:55vw; } .technews-content{ margin-top:40px; } .technews-content ul{ text-align:left; } .technews-page img{ width:40vw; margin:0 auto; } .technews-page a{ font-family:'Arvin Regular',Arial,sans-serif; } .search-form{ display:flex; width:400px; align-items:center; margin:15px auto; text-align:center; } .search-input-container{ position:relative; flex-grow:1; max-width:300px; } #searchInput{ width:100%; padding:10px 30px 10px 10px; border:1px solid #ccc; border-radius:4px; font-size:16px; box-sizing:border-box; } .clear-search{ position:absolute; right:10px; top:40%; transform:translateY(-50%); cursor:pointer; font-size:38px; color:#888; align-items:center; } .clear-search:hover{ color:#333; } .search-form button[type="submit"]{ margin-left:10px; padding:10px 15px; background-color:#690a30; color:white; border:none; border-radius:4px; font-size:16px; cursor:pointer; } .search-form button[type="submit"]:hover{ background-color:#a00a28; } .GetInTouch{ background-image:url("../images/GIT.png"); background-position:top left; background-repeat:no-repeat; background-size:cover; border:none; border-radius:5px; color:white; padding:20px 11px 15px; cursor:pointer; text-transform:uppercase; font-size:20px; font-family:'Anurli Bold',Arial,sans-serif; } .GetInTouch:hover{ background-image:url("../images/GITInvert.png"); color:#FFF; } .GetInTouch:before{ content:url("../images/GITInvert.png"); visibility:hidden; position:absolute; height:0; width:0; overflow:hidden; } .technews-back{ margin:60px auto; text-align:center; } .BackTechNews{ background-image:url("../images/GIT.png"); background-position:top left; background-repeat:no-repeat; background-size:cover; border:none; border-radius:5px; color:white; padding:20px 11px 15px; cursor:pointer; text-transform:uppercase; font-size:20px; font-family:'Anurli Bold',Arial,sans-serif; filter:hue-rotate(260deg); } .BackTechNews:hover{ background-image:url("../images/GITInvert.png"); color:#FFF; } .BackTechNews:before{ content:url("../images/GITInvert.png"); visibility:hidden; position:absolute; height:0; width:0; overflow:hidden; } footer{ background-color:#3C2A6F; color:white; text-align:center; position:relative; box-sizing:border-box; margin-top:auto; } footer a:hover{ opacity:0.3; } footer .footer-content{ background:#3C2A6F url('../images/backgrounds/CDS footer.jpg') top center no-repeat; background-size:cover; display:flex; justify-content:space-between; align-items:flex-start; padding:20px 0 10px; flex-wrap:wrap; box-sizing:border-box; width:100%; } footer nav{ position:relative; width:90%; margin:0 auto; } footer nav ul{ list-style:none; width:100%; margin:0; padding:0; display:flex; justify-content:space-between; align-items:center; } footer nav ul li{ width:max-content; padding:4px 10px 6px; text-align-last:center; } footer nav a{ color:white; text-decoration:none; font-family:'Anurli Bold',Arial,sans-serif; font-size:11px; text-transform:uppercase; } footer nav a:hover{ opacity:0.3; color:#FFF; } footer button:hover{ background:#a00a28; } .footer-logo{ position:relative; left:10px; } .footer-logo img{ width:27vw; max-width:250px; height:auto; } .footer-center{ text-align:center; position:absolute; bottom:50px; left:50%; transform:translateX(-50%); } .footer-center a{ font-size:13px; font-family:'Anurli Bold',Arial,sans-serif; color:#FFF; } .footer-center a:hover{ opacity:0.3; color:#FFF; cursor:pointer; } .footer-center a div{ margin:0px auto 10px; font-family:'Anurli Bold',Arial,sans-serif; width:140px; text-align:center; font-size:17px; position:relative; top:10px; } .footer-right{ text-align:right; } .footer-right p{ margin:5px 0; } .footer-phone{ position:absolute; bottom:90px; right:30px; font-size:23px; text-align:center; font-family:'Anurli Bold',Arial,sans-serif; } .footer-address{ position:absolute; bottom:40px; right:10px; font-size:11px; text-align:center; font-family:'Anurli Bold',Arial,sans-serif; } .footer-address a,.footer-phone a{ color:#FFF; font-weight:100;; } .footer-social{ position:absolute; bottom:0; right:10px; } .footer-social img{ width:27px; height:auto; margin-left:10px; } .footer-bottom{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); display:flex; justify-content:center; align-items:center; gap:15px; flex-wrap:wrap; } .footer-bottom img{ width:55px; } .footer-bottom a,.footer-bottom p{ margin:0; font-size:11px; font-family:'Anurli Bold',Arial,sans-serif; color:#FFF; } .popup{ display:none; position:fixed; z-index:2000; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.4); justify-content:center; align-items:center; } .popup-content{ background-color:#fff; margin:auto; padding:0 20px 20px; border:3px solid #281C3C; border-top:20px solid #281C3C; width:80%; max-width:400px; box-shadow:0 5px 15px rgba(0,0,0,0.3); position:relative; text-align:center; } .close{ position:absolute; top:-31px; right:10px; color:#FFF; font-size:28px; font-weight:bold; cursor:pointer; } .close:hover, .close:focus{ color:#690A30; text-decoration:none; cursor:pointer; } .popup-icon{ width:auto; height:120px; margin:20px auto 0; background-color:#FFF; background-position:center center; background-repeat:no-repeat; background-size:cover; } #popup-title{ font-size:20px; text-transform:uppercase; } #popup-text{ padding:0 20px; } .popup-button{ background-color:#690a30; color:white; padding:10px 20px 5px; border:none; cursor:pointer; margin:20px 0; font-family:'Anurli Bold',Arial,sans-serif; font-size:18px; text-transform:uppercase; border-radius:5px; } .popup-button:hover{ background-color:#a00a28; } .tellMeMore{ background-color:#3C2A6F; } .tellMeMore:hover{ background-color:#281C3C; } .siteText a{ font-size:15px; } .siteText a:hover{ text-decoration:underline; } .stars{ text-align:center; } .main-stars{ margin-bottom:10px; } .star-list{ display:flex; flex-direction:column; gap:10px; margin-top:20px; justify-content:center; align-items:center; width:65%; margin:0 auto; text-align:left; text-align-last:left; } .star-row{ display:flex; justify-content:left; gap:20px; } .star-item{ display:flex; align-items:center; gap:10px; font-size:16px; text-transform:uppercase; font-weight:900; width:200px; } .star-item img.star-icon{ width:30px; height:30px; } .row-overall{ margin:10px auto 20px; justify-content:center; } .overall{ font-weight:bold; font-size:20px; width:260px; } @media (min-width:768px){ } @media (max-width:850px){ .columns{ flex-direction:column; } .columns.reverse{ flex-direction:column; } .service-icons{ grid-template-columns:1fr; grid-template-rows:auto; gap:20px; width:100vw; display:block; } .top-center,.left-above-center,.right-above-center, .left-below-center,.right-below-center,.bottom-left,.bottom-right{ margin:0; grid-column:auto; grid-row:auto; } .center-logo{ transform:none; } .center-logo img{ width:120px; } .hamburger{ display:block; } header nav{ width:auto; margin:auto; } header nav ul li a{ font-size:16px; } .container{ width:90vw; } .bottom-header{ height:20vh; } .bottom-header img{ width:auto; height:20vh; } header .support-number{ right:80px; font-size:17px; } header nav{ padding:0; } header nav ul{ display:none; flex-direction:column; width:100%; } header nav ul.show{ display:flex; background-color:#281C3C; margin:0; width:60%; position:absolute; right:80px; border-radius:0 0 5px 5px; box-shadow:0 2px 3px #690A30; } header nav ul li{ text-align:center; margin:10px 0; } .dropdown-content{ position:static; background-color:#3C2A6F; } .dropdown:hover .dropdown-content{ display:none; } .dropdown .dropdown-content.show{ display:block; background-color:#3C2A6F; } .dropdown.open .dropdown-content{ display:block; } .testimonial a{ right:auto; left:50%; transform:translateX(-50%); } .story-content{ display:block; align-items:center; } .services-page .client-title{ width:100%; max-width:none; margin:10px 0 40px; } .services-page .client-item p{ font-weight:100; } .video-preview{ max-width:none; } footer nav{ width:100%; display:none; } footer nav ul{ flex-wrap:wrap; } footer nav ul li{ width:auto; padding:3px 5px; flex:1 1 25%; line-height:30%; } footer nav ul li a{ font-size:9px; } footer .footer-content{ padding:5px; height:120px; } .footer-center a div{ display:none; } .footer-center a{ font-size:9px; position:absolute; top:-25px; left:50%; transform:translateX(-50%); width:100px; } .footer-phone{ font-size:15px; top:0px; right:5px; } .footer-address{ font-size:9px; } .footer-bottom{ gap:10px; } .fixed-section{ position:relative; top:0px; z-index:99; background-color:transparent; margin:0 auto; width:100%; text-align:center; background-image:none; } .services-page ul{ width:80vw; } .profile-content{ max-width:80vw; } .profile-image{ margin:0; } .success-stories{ max-width:100vw; } .news-item{ display:block; } .news-content{ width:90%; margin:0 auto; } .news-categories{ display:block; } .news-categories a{ display:block; padding:5px 0 0; margin:0 auto; } .speechbubble{ width:90%; border-width:1px; } .testimonial-item{ display:block; } } @media (max-height:600px){ .fixed-section{ position:relative; top:0px; z-index:99; background-color:transparent; margin:0 auto; width:100%; text-align:center; background-image:none; } } @media (max-width:480px){ header{ background-size:cover; } .top-menu{ background-size:cover; } header .logo{ left:30px; } .bottom-header img{ height:20vh; width:auto; padding:0 0 50px; } header .support-number{ font-size:15px; padding:10px; } header .support-number.small{ left:auto; right:30vw; } .logo.small{ left:40px; } .intro ul{ flex-wrap:wrap; } .intro ul li,.intro ul li h1{ font-size:24px; } .client-logos{ flex-direction:column; align-items:center; } .client-item{ margin:10px 0; } .speechbubble{ width:90%; border-width:1px; } .testimonial a{ width:80%; } .popup-button{ width:90%; margin:10px 0 0; } .services-page .popup-button{ position:absolute; top:-20px; right:0; width:100%; } .moresuccess{ font-size:16px; } .service-icons{ width:auto; } .services-page .story-item{ margin:0; } .services-page ul{ padding:0; } .content-wrapper{ padding:0; max-width:90vw; } .cds_team img{ width:80vw; } .contact-form .form-group label{ text-align:left; } .contact-form textarea{ height:300px; } .video-grid{ display:block; } .technews-page img{ width:80vw; } .service-item{ margin:0 0 50px; } .footer-social img{ width:17px; margin:0; } .successStoryDetail img,.story-content img{ width:80%; height:auto; } .successStoryLinks{ margin:0; width:100%; } .successStoryLinks ul li{ padding:4px 5px 6px; } .successStoryLinks a{ font-size:12px; } .star-row{ display:block; } .star-item{ margin:0 0 20px; width:235px; } .overall{ width:240px; } .filter-links{ display:inline-grid; } .contact-form-container{ padding:10px; } }