25 * Template Name: Flexor - v2.0.0
26 * Template URL: https://bootstrapmade.com/flexor-free-multipurpose-bootstrap-template/
27 * Author: BootstrapMade.com
28 * License: https://bootstrapmade.com/license/
31 /*--------------------------------------------------------------
33 --------------------------------------------------------------*/
35 font-family: "Open Sans", sans-serif;
45 text-decoration: none;
48 h1, h2, h3, h4, h5, h6 {
49 font-family: "Raleway", sans-serif;
53 /*--------------------------------------------------------------
55 --------------------------------------------------------------*/
62 background-color: #fff9f7;
75 font-family: "Poppins", sans-serif;
85 /*--------------------------------------------------------------
87 --------------------------------------------------------------*/
88 .about .icon-boxes h4 {
94 .about .icon-boxes h3 {
105 .about .icon-box .icon {
109 justify-content: center;
112 border: 2px solid #ffcbba;
118 .about .icon-box .icon i {
123 .about .icon-box:hover .icon {
125 border-color: #f5f5f5;
128 .about .icon-box:hover .icon i {
132 .about .icon-box .title {
139 .about .icon-box .title a {
144 .about .icon-box .title a:hover {
148 .about .icon-box .description {
155 background: url("./../../assets/images/kubecon-1.png") no-repeat;
156 background-size: cover;
163 background: radial-gradient(#ff5821 50%, rgba(255, 88, 33, 0.4) 52%);
167 left: calc(50% - 47px);
168 top: calc(50% - 47px);
172 .about .play-btn::after {
177 transform: translateX(-40%) translateY(-50%);
180 border-top: 10px solid transparent;
181 border-bottom: 10px solid transparent;
182 border-left: 15px solid #fff;
184 transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
187 .about .play-btn::before {
192 -webkit-animation-delay: 0s;
194 -webkit-animation: pulsate-btn 2s;
195 animation: pulsate-btn 2s;
196 -webkit-animation-direction: forwards;
197 animation-direction: forwards;
198 -webkit-animation-iteration-count: infinite;
199 animation-iteration-count: infinite;
200 -webkit-animation-timing-function: steps;
201 animation-timing-function: steps;
204 border: 5px solid rgba(255, 88, 33, 0.7);
207 background: rgba(200, 94, 84, 0);
210 .about .play-btn:hover::after {
211 border-left: 15px solid #ff5821;
212 transform: scale(20);
215 .about .play-btn:hover::before {
220 transform: translateX(-40%) translateY(-50%);
224 border-top: 10px solid transparent;
225 border-bottom: 10px solid transparent;
226 border-left: 15px solid #fff;
228 -webkit-animation: none;
233 @-webkit-keyframes pulsate-btn {
235 transform: scale(0.6, 0.6);
239 transform: scale(1, 1);
244 @keyframes pulsate-btn {
246 transform: scale(0.6, 0.6);
250 transform: scale(1, 1);
255 /*--------------------------------------------------------------
257 --------------------------------------------------------------*/
258 .services .icon-box {
265 background: linear-gradient(to right, #7de4b0, #bbdfe6);
266 box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
272 left: calc(50% - 36px);
275 border: 6px solid #fff;
277 justify-content: center;
279 flex-direction: column;
295 text-transform: uppercase;
302 .services .icon-box:hover .icon {
304 border: 2px solid #fb521a;
307 .services .icon-box:hover .icon i {
311 .services .icon-box:hover .title a {
315 .services .description {
320 /*--------------------------------------------------------------
322 --------------------------------------------------------------*/
329 #footer .social-links a {
331 display: inline-block;
344 #footer .social-links a:hover {
347 text-decoration: none;