/**
 * Theme Name:  CROMA Child - Ultimate Creative WP Theme
 * Theme URI:   http://croma.irontemplates.com/
 * Description: CROMA is a complete solution for everybody in the creative industry. If you are anyone, this theme is for you.
 *
 * Author:      IronTemplates
 * Author URI:  http://irontemplates.com
 *
 * Version:     1.0
 * Template:    croma
 * Text Domain: croma-child
 *
 * License:     GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 *
 */




/* =Theme customization starts here:
-------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
.fw-flash-messages {
 display: none;
}

/* General adjustments */
.continuousPlayer.enable, .enable.artist_player {
 direction: ltr !important;
}

/* FONTS */
.classic-menu > ul > li a, .classic-menu > ul > li.languages-selector > ul > li a {
 font-family: Tajawal !important;
 letter-spacing: -1px !important;
}

/* COLORS */
/* .iron-audioplayer .control polygon,
.iron-audioplayer .control path,
.iron-audioplayer .control rect,*/
.continuousPlayer .control rect,
.continuousPlayer .control path,
.continuousPlayer .control polygon {
  fill: rgb(214, 186, 139)
}
.continuousPlayer .control div:hover rect,
.continuousPlayer .control div:hover path,
.continuousPlayer .control div:hover polygon {
 fill: rgb(179, 106, 94);
}

/********** MENU **********/
/* Less Margin + Float right (except logo) on mini menu (after scroll) */
.classic-menu.mini > ul > li {
  margin-top: 12px;
  margin-bottom: 12px;
  float: right;
}

/********** Header **********/
#slider-8-slide-9-layer-8 {
	direction: ltr;
}

/********** FOOTER **********/
/* Rearrange Footer items to look similar on ltr and rtl */
.footer-wrapper {
  justify-content: space-around;
}
.footer-row .footer-logo-wrap {
 margin-right: 0;
 order: 1;
}
.footer-row .text.footer-copyright {
 order: 3;
 text-align: center;
}
.footer-row .text.footer-author {
 margin-left: 0;
 order: 2;
 align-self: end;
}
.footer-row .text.footer-author p {
 font-size: 9px;
}


/* =Testi Page:
---------------------------------------------------------------------------------------------------------------------------- */
.testi-title-wrapper {
	padding: 4rem 0;
}

.testi-title {
	font-size: 28px !important;
	padding-bottom: 4rem;
}

/* =Home Page:
---------------------------------------------------------------------------------------------------------------------------- */

/********** About SECTION **********/
.loosh_info {
 padding: 4rem 0;
}
.loosh_main_about_title {
 font-size: 28px;
 padding-bottom: 15px;
}
.loosh_info_p {
 font-family: Tajawal !important;
 font-size: 24px !important;
 text-align: center;
 line-height: 1.3;
 margin-top: 4rem;
}

/********** Samples SECTION **********/
.loosh_main_samples {
 padding: 4rem 0;
}
.loosh_main_samples_title {
 font-size: 28px;
 padding-bottom: 4rem;
}

.loosh_main_samples sr7-module {
	margin: 2rem auto;
}

.loosh_main_samples sr7-module-bg {
	background: transparent !important;
}
/*  position icon */
.loosh_main_samples .loosh_main_sample_but {
	align-content: center;
}

.loosh_main_samples .loosh_main_sample_but i {
	margin: 0 auto !important;
}

/********** Samples SECTION **********/
.loosh_main_testimonials {
 padding: 4rem 0;
}
.loosh_main_testimonials_title {
 font-size: 28px;
 padding-bottom: 4rem;
}


/********** FORM SECTION **********/

.loosh_main_contact {
 padding-top: 4rem;
}
.loosh_main_contact_title {
 font-size: 28px;
 padding-bottom: 15px;
}


/********** Social Media Bar **********/
/* Less space for social media links */
#footer .links-box {
  padding: 0;
}
#footer .social-networks li {
  margin-bottom: 0;
}

/* Social Media Bar icons color, hover color, smaller */
.social-networks a i {
  color: #4b5563;
  padding: 0.3em;  
  font-size: 24px;
}
.social-networks a i:hover {
  color: #b36a5e !important;
}
.footer-block .social-networks {
  line-height: inherit;
}

/* =Who Page:
---------------------------------------------------------------------------------------------------------------------------- */
.who-title-wrapper {
	padding: 4rem 0;
}

.who-title {
	font-size: 28px !important;
	padding-bottom: 2rem;
}

.who-content-wrapper {
	margin: 0 3rem !important;
	margin-bottom: 3rem !important;
}

.who-text div.wpb_wrapper > * {
	font-size: 18px;
	line-height: 1.3;
	text-align: justify;
	text-align-last: center;
}

.who-blockquote {
	margin-left: 0;
	margin-right: 50px;
	margin-top: 20px;
}
.who-quote {
	text-align-last: start;
}
.who-quote-auth {
	text-align-last: end;
	margin-top: 10px;
}

/* =Contact Page:
---------------------------------------------------------------------------------------------------------------------------- */
.contact-icons {
  margin-top: 1rem !important;
}

.contact-whatsapp-butt a {
	background-color: rgb(37, 211, 102) !important;
	box-shadow: 0 5px rgb(18, 155, 69) !important;
}
.contact-whatsapp-butt a:hover {
	box-shadow: 0 2px 0 rgb(18, 155, 69) !important;
}

.contact-whatsapp-butt a, .contact-email-butt a {
	width: 75%;
	text-align: center !important;
	font-size: 1.2rem !important;
}

.contact-whatsapp-butt a i, .contact-email-butt a i {
	font-size: 1.5rem !important;
}

.request-service + div.vc_separator span span {
  border-color: #d6ba8b !important;
  margin-top: 0.5rem;
}

/* =Single Album page:
---------------------------------------------------------------------------------------------------------------------------- */

body.album-template-default div.boxed div.featured{
	background-color: transparent;
	background-image: linear-gradient(rgb(0, 0, 0), rgba(0,0,0,0.35));
	border-radius: 20px;
}

body.album-template-default div.boxed div.featured *{
	color: white;
}

body.album-template-default div.boxed div.featured h2:first-child {
	margin-bottom: 1rem;
}

body.album-template-default div.boxed div.featured img.custom-header-img {
	margin-bottom: 4rem !important;
}

body.album-template-default div.boxed div.featured article div#single_album div.playlist {
	direction: ltr;
}

body.album-template-default div.boxed div.featured article div#single_album div.playlist ul li a.audio-track span.track-number svg {
	height: 100%;
	transform: scale(1.5);
}

body.album-template-default div.boxed div.featured article div#single_album div.playlist ul li a.audio-track span.track-number svg * {
	fill: rgb(214, 186, 139);
}
body.album-template-default div.boxed div.featured article div#single_album div.playlist ul li a.audio-track span.track-number svg:hover *,
body.album-template-default div.boxed div.featured article div#single_album div.playlist ul li.current.playing a.audio-track span.track-number svg * {
	fill: rgb(179, 106, 94);
}

body.album-template-default div.boxed div.featured article div#single_album div.playlist ul li a.audio-track span.track-number span.number {
	visibility: hidden;
	padding: 0;
}

body.album-template-default div.boxed div.featured article div#single_album div.playlist ul li a.audio-track div.tracklist-item-title {
  font-weight: bold;
}

/* =General:
---------------------------------------------------------------------------------------------------------------------------- */

/* Contact Form 7 Form */
.wpcf7-form {
    background: rgba(0, 0, 0, 0.4);
    padding: 30px;
    border-radius: 12px;
    backdrop-filter: blur(5px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
	direction: rtl;
	margin: 2rem auto 0px auto !important;
}

/* Input fields */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgb(214, 186, 139);
    color: #fff;
    padding: 12px 18px;
    font-size: 16px;
    border-radius: 8px;
    width: 100%;
    margin-bottom: 15px;
    transition: all 0.3s ease;
	direction: rtl;
}

/* Placeholder color */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: #bbb;
}

/* Focus */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
    border-color: #ffffff;   
	background: rgba(0, 0, 0, 0.5); 
    outline: rgb(179, 106, 94);
	color: rgb(179, 106, 94);
}
.wpcf7-form input[type=submit]:focus {
	background: rgb(179, 106, 94);
}


/* Error messages */
.wpcf7-not-valid-tip {
    color: rgb(214, 186, 139);
    font-size: 14px;
    margin-top: -8px;

}

/* Submit button */
.wpcf7-submit {
    color: #000 !important;
    padding: 14px 28px;
    font-size: 18px;
    border: none;
    border-radius: 8px !important;
    cursor: pointer;
    transition: background 0.4s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
	line-height: 0;
	width: 100%;
}

/* Hover effect */
.wpcf7-submit:hover {
    background-color: rgb(179, 106, 94);
    color: rgb(179, 106, 94);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Tick mark after sending */
.wpcf7-submit.success-pulse::after {
    content: "✔";
    color: #000;
    font-size: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/********** Floating Whatsapp **********/
.loosh_wp_wrapper {
    position: fixed;
    z-index: 999;
    cursor: pointer;
    bottom: 100px;
    right: 40px;
    width: 60px;
    height: 60px;
    background: rgb(37, 211, 102);
    border-radius: 100%;
    box-shadow: 0 0 0 rgba(37, 211, 102, 0);
	animation: heartBeat 2s infinite;
}

/*icon wrapper*/
.loosh_wp_wrapper_link {
    text-decoration: none;
    width: 60px;
    height: 60px;
}
.loosh_wp_wrapper:hover {
    opacity: 0.8;
}

/*icon style*/
.loosh_wp_wrapper_link i {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    font-size: 35px;
    color: #fff;
}


/********** MEDIA **********/
@media (min-width: 768px) {
  .wpcf7-form {
    width: 75% !important;
  }
}

/********** ANIMATION **********/
/* Pulse animation on success */
.wpcf7-submit.success-pulse {
    animation: pulse 0.6s ease forwards;
}

/* Keyframes */
@keyframes pulse {
    0% { transform: scale(1); background-color: rgb(214, 186, 139); }
    50% { transform: scale(1.1); background-color: #a98d2d; }
    100% { transform: scale(1); background-color: rgb(214, 186, 139); }
}

@keyframes heartBeat {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 1); }
    70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 30px rgba(37, 211, 102, 0); }
}