/*
Theme Name: IT Cyber Security
Theme URI: https://www.theclassictemplates.com/products/it-cyber-security
Author: classictemplate
Author URI: https://www.theclassictemplates.com/
Description: IT Cyber Security Theme is designed with a structured layout for presenting digital security services, technical information, and organizational details. Its page sections can be used to display service descriptions, company information, contact details, project highlights, and other relevant content. The theme uses a responsive layout so pages can adapt to desktop, tablet, and mobile screen sizes. The design provides configurable sections for organizing content in a clear hierarchy. Navigation menus help visitors move between important pages, while customizable colors, typography, images, and layout elements allow the visual presentation to be adjusted to match a specific identity. The homepage can include banners, service sections, introductory content, calls to action, and other standard website components. IT Cyber Security Theme can also support blog or article content for publishing updates, technical information, announcements, and educational resources. Its compatibility with common website customization options makes it possible to modify page structures and content without changing the overall theme framework. The layout is suitable for presenting cybersecurity-related information in a straightforward and organized format while maintaining consistency across different screen sizes.
Template: it-security
Version: 0.0.1
Tested up to: 7.0
Requires PHP: 5.6
Requires at least: 5.0
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl.html
Text Domain: it-cyber-security
Tags: blog, portfolio, photography, one-column, two-columns, three-columns, four-columns, grid-layout, left-sidebar, right-sidebar, custom-logo, post-formats, featured-images, full-width-template, custom-colors, editor-style, flexible-header, footer-widgets, wide-blocks, custom-header, translation-ready, custom-background, custom-menu, sticky-post, threaded-comments, rtl-language-support, theme-options

IT Cyber Security WordPress Theme has been created by classictemplate (theclassictemplates.com), 2026.
IT Cyber Security WordPress Theme is released under the terms of GNU GPL

IT Cyber Security WordPress Theme is child theme of IT Security WordPress Theme, Copyright 2021 classictemplate (theclassictemplates.com)
IT Cyber Security WordPress Theme is distributed under the terms of the GNU GPL
*/

:root {
  --first-theme-color: #4D55AC;
  --second-theme-color: #55C9E1;
}
body {
  margin: 0;
  padding: 0;
  font-size: 15px;
  color: #ffffff;
  font-family: "Syne", sans-serif;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  background-color: #010101;
}
a{
  text-decoration: none;
  color: #ffffff;
}

/* Service Slider */
#service-section .service-box{
  background: linear-gradient(92.28deg, var(--first-theme-color) 0%, #1D1D1D 50.5%, var(--second-theme-color) 100%);
  border-radius: 200px;
  padding: 2px;
  z-index: 1;
}
#service-section .service-box .service-inner-box, #service-section .service-box .service-icon i {
  background-color: #010101;
  border-radius: 200px;
  padding: 50px 60px;
}
#service-section .service-box .service-bg-1, #service-section .service-box .service-bg-2{
  width: 50%;
  bottom: 20px;
  height: 98%;
  border-radius: 200px;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  padding: 126px;
}
#service-section .service-box .service-bg-1{
  box-shadow: 0px 0px 20px 0px var(--first-theme-color);
  left: 0;
  backdrop-filter: blur(75px);
}
#service-section .service-box .service-bg-2{
  box-shadow: 0px 0px 20px 0px var(--second-theme-color);
  right: 0;
  backdrop-filter: blur(75px);
}
#service-section .service-box .service-title{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
#service-section .service-box .service-desc{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#service-section .service-box .service-title{
  font-size: 22px;
}
#service-section .service-box .service-icon::after{
  content: '';
  width: 50px;
  height: 50px;
  position: absolute;
  top: -1px;
  left: -1px;
  border-radius: 50%;
  z-index: 0;
  padding: 1px;
  background: linear-gradient(92.28deg, var(--first-theme-color) 0%, #1D1D1D 50.5%, var(--second-theme-color) 100%);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: spin 5s linear infinite;
}
#service-section .service-box .service-icon i{
  padding: 0;
  height: 48px;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: 1s;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(90deg); }
  50% { transform: rotate(180deg); }
  75% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}

#service-section .service-box::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  transition: all 1s ease 0s;
  border-radius: 320px;
}
#service-section .service-box .service-sub-box{
  z-index: 1;
}
#service-section .service-box:hover::after{
  height: 100%;
  background-image: linear-gradient(92.28deg, var(--first-theme-color) 0%, #1D1D1D 50.5%, var(--second-theme-color) 100%);
  opacity: 0.6;
}
#service-section .service-box:hover .service-icon i{
  animation: flipInX 2s infinite;
}

@keyframes flipInX{
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
  }
  60% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      opacity: 1;
  }
  80% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);
  }
}