/*
Theme Name: CleverSoft Child
Theme URI: https://cleversoft.qodeinteractive.com
Description: A child theme of CleverSoft
Author: Edge Themes
Author URI: https://qodeinteractive.com
Version: 1.0.0
Text Domain: cleversoft
Template: cleversoft
*/

/* ----------------- DESIGN ----------------- */
/* Selection */
::-moz-selection {
	color: #fff;
	background: var( --e-global-color-primary )
}

::selection {
	color: #fff;
	background: var( --e-global-color-primary )
}


/* Mark */
mark {
    background: var( --e-global-color-primary )
    color: #fff;
    font-weight: 700;
}


/* Fluent Forms */
.fluentform .ff-btn-submit {
	margin-top: 10px !important;
    font-weight: 700 !important;
}

.fluentform .ff-btn:hover {
    opacity: 1 !important;
}

/* Galéria címsor */
.elementor-slideshow__title {
    display: none !important;
}



/* ----------------- BLOG ----------------- */

/* Bejegyzés kivonatok után 3 pont*/
.elementor-posts .elementor-post__excerpt p:after {
content: "..." !important;
}


/* --- MENU --- */

@media only screen and (min-width: 767px) {
.menu-cta a {
	border-radius: 5px;
	padding: 12px 20px !important;
	background: #ea593a !important;
	color: #fff !important;
	border:0px solid #ea593a !important;
}
.menu-cta a:hover {
	background: #C3153A;
	color: #fff !important;
	border: 2px solid #318CD3
}
}




.gomb-fedezzefel .elementor-button:hover,
.gomb-fedezzefel .elementor-button:hover span,
.gomb-fedezzefel:hover .elementor-button,
.gomb-fedezzefel:hover .elementor-button span {
    color: #ffffff !important;
}

.gomb-szolgaltatasok .qodef-m-button .qodef-button:hover,
.gomb-szolgaltatasok .qodef-m-button .qodef-button:focus {
    background-color: #5C2D77 !important;
    border-color: #5C2D77 !important;
}

.fejlec-hover {
  transition: background-color 0.3s ease;
}

.fejlec-hover:has(.elementor-nav-menu li:hover) {
  background-color: #ffffff !important;
}

/* ===== FŐ KONTÉNER ===== */

.fo-kontener {
  transform: translateY(0);
  transition: transform 0.4s ease;
}

/* A teljes főkonténer hoverre 10 px-lel felfelé mozdul */
.fo-kontener:hover {
  transform: translateY(-10px);
}


/* ===== CÍM KONTÉNER ===== */

.fo-kontener .cim-kontener {
  transform: translateY(0);
  transition: transform 0.4s ease;
}

/*
A címkonténer saját mozgása 20 px lefelé.
Mivel a főkonténer közben 10 px-lel felfelé mozdul,
a cím az eredeti helyzetéhez képest 10 px-lel lejjebb kerül.
*/
.fo-kontener:hover .cim-kontener {
  transform: translateY(20px);
}


/* ===== CÍM / ALSÓ SOR KONTÉNER ===== */

.fo-kontener .cim-kontener {
  display: flex;
  align-items: center !important;
  overflow: hidden;
}


/* ==========================================
   ALSÓ SOR – SZÖVEG + NYÍL
   ========================================== */


/* ===== SZÖVEG ===== */

.fo-kontener .tovabb-szoveg {
  height: 100%;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
}

/* Elementor belső widget konténere */
.fo-kontener .tovabb-szoveg > .elementor-widget-container {
  width: 100%;
  height: 100%;

  display: flex !important;
  align-items: center !important;

  margin: 0 !important;
}

/* Ha a szöveg bekezdésként jelenik meg */
.fo-kontener .tovabb-szoveg p {
  margin: 0 !important;
}


/* ==========================================
   FŐ KONTÉNER
   ========================================== */

.fo-kontener {
  transform: translateY(0);
  transition: transform 0.4s ease;
}

/* Hoverre 10 px-lel felfelé */
.fo-kontener:hover {
  transform: translateY(-10px);
}


/* ==========================================
   CÍM KONTÉNER
   ========================================== */

.fo-kontener .cim-kontener {
  transform: translateY(0);
  transition: transform 0.4s ease;
}

/* A főkonténer mozgását figyelembe véve
   ténylegesen 10 px-lel kerül lejjebb */
.fo-kontener:hover .cim-kontener {
  transform: translateY(20px);
}


/* ==========================================
   NYÍL KONTÉNER
   ========================================== */

.fo-kontener .nyil-kontener {
  position: relative;

  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  flex-basis: 80px !important;
  flex-shrink: 0 !important;

  box-sizing: border-box;
  overflow: hidden;

  transition: background-color 0.4s ease;
}


/* ==========================================
   NYÍL KONTÉNER HÁTTERE
   ========================================== */

.fo-kontener:hover .nyil-kontener {
  background-color: #5C2D77;
}


/* ==========================================
   NYÍL – VÍZSZINTES SZÁR
   ========================================== */

.fo-kontener .nyil-kontener::before {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: 36px;
  height: 2px;

  background-color: #5C2D77;

  opacity: 1;
  transform: translate(-50%, -50%);
}


/* ==========================================
   NYÍL – NYÍLHEGY
   ========================================== */

.fo-kontener .nyil-kontener::after {
  content: "";

  position: absolute;
  top: 50%;
  left: calc(50% + 12px);

  width: 10px;
  height: 10px;

  border-top: 2px solid #5C2D77;
  border-right: 2px solid #5C2D77;

  opacity: 1;

  transform:
    translate(-50%, -50%)
    rotate(45deg);
}


/* ==========================================
   HOVER – SZÍNVÁLTÁS
   ========================================== */

.fo-kontener:hover .nyil-kontener::before {
  background-color: #ffffff;
  animation: nyil-szar-bekuszas 0.5s ease forwards;
}

.fo-kontener:hover .nyil-kontener::after {
  border-color: #ffffff;
  animation: nyil-hegy-bekuszas 0.5s ease forwards;
}


/* ==========================================
   NYÍL SZÁR BECSÚSZÁS
   ========================================== */

@keyframes nyil-szar-bekuszas {
  0% {
    opacity: 0;
    left: calc(50% - 25px);
  }

  100% {
    opacity: 1;
    left: 50%;
  }
}


/* ==========================================
   NYÍLHEGY BECSÚSZÁS
   ========================================== */

@keyframes nyil-hegy-bekuszas {
  0% {
    opacity: 0;
    left: calc(50% + 12px - 25px);
  }

  100% {
    opacity: 1;
    left: calc(50% + 12px);
  }
}