/*
Theme Name: MBS
Author: Atanas
Description: CSS for outside of default theme.
Version: 1.0
*/

/* Make only popup images clickable */
.clickable-img-popup .wppb-image-addon-img {
  cursor: pointer;
}

/* Popup background overlay */
.image-popup-overlay {
  display: none;
  position: fixed;
  z-index: 999999;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
  padding: 30px;
}

/* Popup image */
.image-popup-overlay img {
  max-width: 90%;
  max-height: 85vh;
  object-fit: contain;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* X close button */
.image-popup-close {
  position: fixed;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 45px;
  font-weight: 300;
  cursor: pointer;
  line-height: 1;
  z-index: 1000000;
}

.image-popup-close:hover {
  color: #ff7300;
}


/* ----------------------------------------- Form  Start ----------------------------------------- */

.jsm-form-wrap {
  width: 100%;
}

.jsm-form-row {
  display: flex;
  gap: 14px;
  margin-bottom: 5px;
}

.jsm-form-col {
  width: 50%;
}

.jsm-form-col-full {
  width: 100%;
}

.jsm-form-input,
.jsm-form-textarea {
  width: 100%;
  border: none;
  background: #fff;
  color: #333;
  font-size: 16px;
  padding: 13px 15px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
  outline: none;
  border-radius: 0;
}

.jsm-form-textarea {
  height: 120px;
  resize: none;
}

.jsm-form-input::placeholder,
.jsm-form-textarea::placeholder {
  color: #666;
  opacity: 1;
}

.jsm-form-submit-wrap {
  margin-top: 15px;
}

.jsm-form-submit {
  background: #000;
  color: #fff;
  border: none;
  padding: 15px 22px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}

.jsm-form-submit:hover {
  background: #222;
  color: #fff;
}


.jsm-form-submit-blue {
  background: #3C84C7;
  color: #fff;
  border: none;
  padding: 15px 22px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}

.jsm-form-submit-blue:hover {
  background: #2465a1;
  color: #fff;
}

.jsm-form-wrap .wpcf7-spinner {
  margin-left: 10px;
}

@media (max-width: 767px) {
  .jsm-form-row {
    flex-direction: row;
    gap: 8px;
  }

  .jsm-form-col {
    width: 50%;
  }

  .jsm-form-col-full {
    width: 100%;
  }

  .jsm-form-input,
  .jsm-form-textarea {
    font-size: 14px;
    padding: 12px 10px;
  }

  .jsm-form-submit-wrap {
    margin-top: 5px;
  }

  .jsm-form-submit {
    width: 100%;
  }
}


/* ------------------------------------------- Form End ------------------------------------------ */

/* ----------------------------------------- Home Page Start ----------------------------------------- */

.custom-check .feature-icontitle-left {
  display: flex;
  align-items: center;
}


/* ----------------------------------------- Home Page End -----------------------------------------*/

.metal-card {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 520px;
  overflow: hidden;
  background: #fff;
}

.metal-card-front {
  position: relative;
  width: 100%;
  height: 100%;
}

.metal-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Main sliding panel */
.metal-card-panel {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 150px;
  background: #000;
  overflow: hidden;
  transition: height 0.45s ease;
}

/* Black title area */
.metal-card-title {
  height: 150px;
  padding: 35px 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #000;
}

.metal-card-title h3 {
  color: #fff;
  font-size: 30px;
  line-height: 1.08;
  margin: 0;
  font-weight: 800;
}

.metal-arrow {
  width: 62px;
  height: auto;
  display: block;
  transition: transform 0.45s ease;
  transform-origin: center;
}

/* White back content */
.metal-card-content {
  height: 370px;
  background: #fff;
  padding: 0px 20px;
	
	display: flex;
  align-items: center;
}

.metal-content-inner {
	width: 100%;
  display: grid;
  grid-template-columns: 50% 1fr;
  gap: 28px;
  align-items: center;
}

.metal-inside-img {
  width: 100%;
  object-fit: cover;
  display: block;
}

.metal-details ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.metal-details li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 10px;
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
  color: #222;
}

.metal-details li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  background-image: url("/wp-content/uploads/2026/05/Icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.metal-button {
  display: inline-block;
  background: #3C84C7;
  color: #fff;
  padding: 13px 39px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  width: 100%;
	text-align: center;
}

.metal-button:hover {
  color: #fff;
  background: #2778b8;
}

/* Hover effect */
.metal-card:hover .metal-card-panel {
  height: 520px;
}

.metal-card:hover .metal-arrow {
  transform: rotate(90deg);
}

/* Mobile */
@media (max-width: 575px) {
  .metal-card {
    height: 470px;
  }

  .metal-bg {
    height: 100%;
    object-fit: cover;
  }

  .metal-card-panel {
    height: 110px;
  }

  .metal-card-title {
    height: 110px;
    padding: 28px 24px;
  }

  .metal-card-title h3 {
    font-size: 20px;
  }

  .metal-arrow {
    width: 50px;
  }

  .metal-card:hover .metal-card-panel {
    height: 470px;
  }

  .metal-card-content {
    padding: 0px 18px;
  }

  .metal-content-inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .metal-inside-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
  }

  .metal-details ul {
    margin: 0 0 18px;
  }

  .metal-details li {
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 1.15;
  }

  .metal-button {
    width: 100%;
    text-align: center;
    padding: 13px 20px;
    font-size: 16px;
  }
}


/* ----------------------------------------- Random Start ----------------------------------------- */

#wpadminbar {
	height: 46px !important;
	background: #000000 !important;
}

.sora-font span{
	font-family: 'Sora', sans-serif !important;
}


.custom-flip-box .wppb-flipbox-panel .flip-box { 
	display: block !important; 
}

.custom-flip-box .wppb-flipbox-panel .wppb-flipbox-front {
	padding: 0px 20px 20px 20px !important;
}


.custom-flip-box .wppb-flipbox-panel .wppb-flipbox-back {
	padding: 0px 20px 20px 20px !important;
}


.img-hover {
  overflow: visible;
  text-align: center;
}

.img-hover img {
  display: block;
  margin: 0 auto;
  transition: transform 0.35s ease;
  transform-origin: center center;
}

.img-hover:hover img {
  animation: imageHoverSpin 5s linear infinite;
}

@keyframes imageHoverSpin {
  from {
    transform: scale(1.15) rotate(0deg);
  }

  to {
    transform: scale(1.15) rotate(360deg);
  }
}

.c-w-33 {
	width: 33% !important;
}

/*  ----------------------------------------- Random End -----------------------------------------  */

/* Tablet or smaller */
@media (max-width: 992px) { 

}

/* Mobile */
@media (max-width: 767px) { 
	.c-w-33 {
		width: 50% !important;
	}
	.wppb-builder-container .wppb-column-parent-view.m-p-r-10 {
		padding-right: 10px !important;
	}
	
	.wppb-builder-container .wppb-column-parent-view.m-p-l-10 {
		padding-left: 10px !important;
	}
}