/*** ============================================= service Style1 Area Css ============================================= ***/ .service-style1-area { position: relative; display: block; padding: 120px 0 80px; background: #ffffff; z-index: 10; } .service-style1-area::before { position: absolute; top: 0; left: 0; bottom: 480px; right: 0; background: #f2f3fa; content: ""; z-index: -1; } .primary-bg-color { position: absolute; top: 0; left: 0; right: 0; min-height: 603px; background: var(--thm-primary); z-index: -1; } .single-service-style1 { position: relative; display: block; margin-bottom: 40px; } .single-service-style1 .img-holder { position: relative; display: block; overflow: hidden; } .single-service-style1 .img-holder:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; background-color: var(--thm-base); z-index: 1; transform: scale(0.9); transform-origin: center; transform-style: preserve-3d; transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52); } .single-service-style1:hover .img-holder:before { opacity: 0.7; transform: scale(1.0); transition: all 0.7s cubic-bezier(0.62, 0.21, 0.45, 1.52); } .single-service-style1 .img-holder img { width: 100%; height: 350px; transform: scale(1.0); transition: all 0.3s ease-in-out 0.1s opacity .2s ease-in; } .single-service-style1:hover .img-holder img { transform: scale(1.1) rotate(1deg); } .single-service-style1 .text-holder { position: relative; display: block; background: #ffffff; box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05); padding: 33px 60px 40px; } .single-service-style1 .text-holder::before { content: ""; position: absolute; left: 0; bottom: 0; right: 0; height: 2px; background: var(--thm-base); transform: scaleX(0); transition: all 500ms linear; transition-delay: 0.1s; } .single-service-style1:hover .text-holder::before { transform: scaleX(1.0); } .single-service-style1 .text-holder h3 { font-size: 20px; line-height: 30px; font-weight: 700; margin-bottom: 12px; } .single-service-style1 .text-holder h3 a { color: var(--thm-primary); } .single-service-style1 .text-holder h3 a:hover { color: var(--thm-base); } .single-service-style1 .text-holder p { font-size: 18px; line-height: 34px; margin: 0; text-align: justify; } .single-service-style1 .text-holder .btn-box { position: relative; display: block; margin-top: 15px; } .single-service-style1 .text-holder .btn-box a { color: var(--thm-primary); font-size: 12px; line-height: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .single-service-style1 .text-holder .btn-box a:hover { color: var(--thm-base); } .single-service-style1 .text-holder .btn-box a span::before { position: relative; display: inline-block; font-size: 18px; line-height: 18px; padding-left: 2px; top: 3px; } /*** ============================================= service Style1 Area Css ============================================= ***/ .service-page { position: relative; display: block; padding: 120px 0 80px; background: #ffffff; z-index: 10; } /*** ============================================= Service Details Area Css ============================================= ***/ .service-details-area { position: relative; display: block; background: #ffffff; padding: 120px 0px 120px; z-index: 10; } .service-details__sidebar { position: relative; display: block; max-width: 370px; width: 100%; } .view-all-service { position: relative; display: block; } .view-all-service .service-pages { position: relative; display: block; } .view-all-service .service-pages li { position: relative; display: block; border-bottom: 1px solid #ffffff; } .view-all-service .service-pages li:last-child { margin-bottom: 0px; } .view-all-service .service-pages li a { position: relative; display: block; background: #f2f3fa; padding: 0px 40px 0px; color: var(--thm-black); font-size: 16px; font-weight: 700; line-height: 70px; font-family: var(--thm-font); transition: all 200ms linear; transition-delay: 0.1s; z-index: 1; } .view-all-service .service-pages li.active a, .view-all-service .service-pages li:hover a { color: var(--thm-base); } .view-all-service .service-pages li a span { position: relative; display: block; color: var(--thm-primary); font-size: 14px; font-weight: 400; float: right; line-height: 70px; transition: all 200ms linear; transition-delay: 0.1s; } .view-all-service .service-pages li.active a span, .view-all-service .service-pages li:hover a span { color: var(--thm-base); } .view-all-service .service-pages li a::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ffffff; transform: perspective(400px) scaleY(0); transform-origin: center; transition: all 300ms linear; transition-delay: 0.1s; z-index: -1; } .view-all-service .service-pages li:hover a::before, .view-all-service .service-pages li.active a::before { transform: perspective(400px) scaleY(1.0); } .service-details-contact-info { position: relative; display: block; background: var(--thm-base); padding: 53px 50px 58px; margin-top: 30px; z-index: 1; } .service-details-contact-info .sidebar-info-box-bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-attachment: scroll; background-repeat: no-repeat; background-size: cover; background-position: top center; z-index: -1; } .service-details-contact-info .sidebar-info-box-bg:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: var(--thm-primary); opacity: 0.90; } .service-details-contact-info h3 { color: #ffffff; font-size: 20px; line-height: 30px; margin: 0 0 33px; } .service-details-contact-info p { color: #9ea8db; font-size: 16px; line-height: 30px; font-weight: 700; margin: 0; } .service-details-contact-info h2 { font-size: 20px; font-weight: 700; margin: 26px 0 0; } .service-details-contact-info h2 a { color: #ffffff; } .info-download-box { position: relative; display: block; margin-top: 30px; } .info-download-box ul { position: relative; display: block; } .info-download-box ul li { position: relative; display: flex; align-items: center; background: var(--thm-base); padding: 25px 50px 25px; } .info-download-box ul li .icon { position: relative; display: block; width: 50px; } .info-download-box ul li .icon span:before { position: relative; display: block; color: #ffffff; font-size: 30px; line-height: 30px; } .info-download-box ul li .title { position: relative; display: block; } .info-download-box ul li .title h5 { color: #ffffff; font-size: 16px; line-height: 20px; font-weight: 600; } .info-download-box ul li .title h5 a { color: #ffffff; transition: all .5s ease-in-out; } .info-download-box ul li .title h5 a:hover { color: var(--thm-primary); } .service-details__content { position: relative; display: block; } .service-details__content .img-box1 { position: relative; display: block; overflow: hidden; } .service-details__content .img-box1::after { position: absolute; top: 0; left: -100%; content: ''; width: 50%; height: 100%; background: linear-gradient(to right, rgba(var(--thm-base-rgb), .1) 0%, rgba(var(--thm-base-rgb), .5) 50%, rgba(255, 255, 255, .9) 100%); transform: skewX(-15deg); z-index: 2; } .service-details__content .img-box1:hover::after { -webkit-animation: shine 1.5s; animation: shine 1.5s; } @-webkit-keyframes shine { 100% { left: 125%; } } @keyframes shine { 100% { left: 125%; } } .service-details__content .img-box1 img { width: 100%; } .service-details__content .img-box1:hover img { transform: scale(1.3) rotate(1deg); } .service-details__content .text-box1 { position: relative; display: block; margin-top: 42px; } .service-details__content .text-box1 h2 { font-size: 34px; line-height: 44px; font-weight: 700; margin-bottom: 21px; } .service-details__content .text-box1 p { font-size: 18px; line-height: 34px; margin: 0; } .service-details__content .text-box1 p+p { margin-top: 20px; } .service-details__content .text-box2 { position: relative; display: block; margin-top: 48px; margin-bottom: 50px; } .service-details__content .text-box2 .text-box2-single { position: relative; display: block; background: #f2f3fa; padding: 44px 40px 23px; transition: all 200ms linear; transition-delay: 0.1s; } .service-details__content .text-box2 .text-box2-single:hover { background: #ffffff; box-shadow: 0px 0px 60px 20px rgb(0 0 0 / 8%); } .service-details__content .text-box2 .text-box2-single h4 { font-size: 20px; line-height: 28px; font-weight: 700; margin: 0 0 14px; } .service-details__content .text-box2 .text-box2-single h4 span::before { position: relative; display: inline-block; color: var(--thm-base); font-size: 20px; top: 2px; padding-right: 7px; } .service-details__content .text-box3 { position: relative; display: block; } .service-details__content .text-box3 p { font-size: 18px; line-height: 34px; margin: 0; } .service-details__content .text-box4 { position: relative; display: block; margin-top: 48px; } .service-details__content .text-box4 .content-box { position: relative; display: block; margin-top: -7px; } .service-details__content .text-box4 .content-box h2 { font-size: 30px; line-height: 40px; font-weight: 700; margin-bottom: 20px; } .service-details__content .text-box4 .content-box p { color: var(--thm-base); font-size: 20px; line-height: 34px; margin: 0; } .service-details__content .text-box4 .content-box ul { position: relative; display: block; margin-top: 33px; } .service-details__content .text-box4 .content-box ul li { position: relative; display: block; margin-bottom: 18px; color: var(--thm-gray); font-size: 18px; line-height: 28px; font-weight: 400; } .service-details__content .text-box4 .content-box ul li:last-child { margin-bottom: 0; } .service-details__content .text-box4 .content-box ul li span::before { position: relative; display: inline-block; color: var(--thm-base); font-size: 20px; top: 2px; padding-right: 7px; } .service-details__content .text-box4 .img-box { position: relative; display: block; } .service-details__content .text-box4 .img-box img { width: 100%; } .faq-style1__content { margin-top: 60px; }