/* 1. Set LRT Direction for the container and the table */
body.page-id-10331 .money-changer-table-container {
    direction: ltr; /* Sets Left-to-Right direction for the container */
    text-align: left; /* Aligns text to the left */
}

/* 2. Explicitly set LTR direction for the table content structure */
body.page-id-10331 .money-changer-table {
    direction: ltr; /* Added: Ensures the internal table structure (columns) is LTR */
    width: 100%;
    border-collapse: collapse; 
}

/* 3. Title Styling (h4 in bold) */
body.page-id-10331 .money-changer-table-container h4 {
    font-weight: bold; 
    margin-bottom: 10px;
}

/* 4. Cell Border Lines (1px width up and down) */
body.page-id-10331 .money-changer-table th, 
body.page-id-10331 .money-changer-table td {
    /* Top and Bottom border only */
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: none; 
    border-right: none;
    padding: 8px;
    text-align: inherit; /* Inherit LTR from container/table */
}

/* 5. URL to be Blue (using the anchor tag in the Website column) */
body.page-id-10331 .money-changer-table td a {
    color: #007bff; /* Standard blue color for links */
    text-decoration: none; 
}


@media only screen and (max-width: 568px) {

    /* --- 1. Force 100% Width on Container, Table, and TBODY --- */
    
    /* Ensure the container is fully available and overrides any max-width */
    .money-changer-table-container {
        width: 100% !important; 
        max-width: 100% !important; 
        overflow: hidden; 
    }

    /* Force the table itself to act as a full-width block */
    .money-changer-table {
        width: 100% !important;
        display: block !important; 
        max-width: 100% !important; 
    }
    
    /* 🔥 NEW FIX: Force TBODY to 100% width and display block */
    .money-changer-table tbody {
        width: 100% !important;
        display: block !important; 
    }

    /* Hide the original table headers */
    .money-changer-table thead {
        display: none;
    }

    /* --- 2. Style the TR (The Box/Card) --- */

    /* Treat each table ROW (<tr>) as a block element (like a card) */
    .money-changer-table tr {
        display: block;
        border: 1px solid #ccc;
        margin-bottom: 10px;
        border-radius: 5px;
        
        /* Ensure the box width is 100% of the table/tbody */
        width: 100% !important; 
        box-sizing: border-box; 
    }

    /* --- 3. Style the TD (Content Rows in the Box) --- */
    
    /* Treat each table CELL (<td>) as a block element (full width) */
    .money-changer-table td {
        display: block;
        text-align: right; 
        border: none !important; 
        padding: 5px 10px; 
        position: relative;
    }
    
    /* --- 4. Implement Item Labels (Money Changer, Website, Telephone) --- */

    .money-changer-table td::before {
        content: attr(data-label);
        font-weight: bold;
        float: left; 
        margin-left: 0;
        margin-right: 10px; 
        color: #555;
    }
    
    /* Hide the horizontal line used in the original table design */
    .money-changer-table tr:nth-child(even) td {
        border-top: none;
    }
    
    /* Fix: Remove 'nowrap' for phone numbers to prevent overflow */
    .money-changer-table td a[href^="tel:"] {
        white-space: normal !important;
    }
    
    /* --- 5. Implement Zebra Stripe Backgrounds (White/Gray) --- */

    /* Apply light gray background to every second "card" (tr) */
    .money-changer-table tr:nth-child(even) {
        background-color: #f7f7f7; 
    }
    
    /* Ensure odd rows are white (default) */
    .money-changer-table tr:nth-child(odd) {
        background-color: #ffffff;
    }
}




body.page-id-10331 .money-changer-table td a:hover {
    text-decoration: underline; 
}

/* 6. Telephone numbers clickable (using the tel: anchor tag) */
body.page-id-10331 .money-changer-table td a[href^="tel:"] {
    color: #007bff;
    white-space: nowrap; 
}

/* Basic header styling for contrast */
body.page-id-10331 .money-changer-table thead th {
    background-color: #f8f8f8;
    font-weight: 600;
    border-bottom: 2px solid #ccc; 
}


	body.page-id-10331 section.main-section h1#home_page_h1_hebrew, 
	body.page-id-10331 section.main-section h1#home_page_h1_hebrew a {
		font-size: 40px;
		font-weight: 700 !important;
		margin-top: 0 !important;
		margin-bottom: 22px !important;
		text-align: right !important;
		color: #fff !important;
	}

@media (max-width: 800px) and (min-width: 480.01px) {
	body.page-id-10331 section.main-section h1#home_page_h1_hebrew, 
	body.page-id-10331 section.main-section h1#home_page_h1_hebrew a {
		font-size: 26px!important;}}

@media (max-width: 480px)  {
	body.page-id-10331 section.main-section h1#home_page_h1_hebrew, 
	body.page-id-10331 section.main-section h1#home_page_h1_hebrew a {
		font-size: 24px!important;}}	
	

@media (max-width: 1438px) and (min-width: 1201px) {
    body.page-id-10331 h1.page-titel{
        margin-top: 123px !important;
        margin-bottom: 0px !important;
        font-size: 28pt !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

@media (max-width: 1438px) and (min-width: 1201px) {
	body.page-id-10331 h1:not(.page-titel) {
        margin-top: 0px !important;
        margin-bottom: 45px !important;
        font-size: 28pt !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}



body.page-id-10331 div#calc-block{
	background-color: lightblue@important}

body.page-id-10331 p {
	font-size: 24px;
	font-weight: bold;}

@media (max-width: 800px) and (min-width: 480.01px) {
	 p {
	font-size: 22px!important}
}
	
@media (max-width: 480px)  {
 	p {
	font-size: 20px!important}
}

body.page-id-10331 h3,
body.page-id-10331 h3 span{
	font-size: 26px!important;
	color: black!important}



body.page-id-10331 .text-slider-box{
	margin-top: 25px!important}



@media (max-width: 480px) {
        body.page-id-10331 section.vc_section.main-section.vc_custom_1528288616459.vc_section-has-fill .vc_row-full-width.vc_clearfix {
			height: 0px!important;
			max-height: 0px!important;
    }
}


body.page-id-10331 .main-section{
	padding-top: 50px!important}



@media only screen and (max-width: 568px) and (min-width: 480.01px) {
    body.page-id-10331 .money-changer-table,
    body.page-id-10331 .money-changer-table th,
    body.page-id-10331 .money-changer-table td {
        font-size: 18px !important;
    }
}

@media only screen and (max-width: 480px)  {
    body.page-id-10331 .money-changer-table,
    body.page-id-10331 .money-changer-table th,
    body.page-id-10331 .money-changer-table td {
        font-size: 17px !important;
    }
}


@media (max-width: 480px) {
	body.page-id-10331 .main-section strong{
		font-size: 18px!important}}

body.page-id-10331 div.money-changer-table-container{
	max-width: 100%!important}


@media (max-width: 768px) {
   body.page-id-10331 section.vc_section.vc_section-has-fill {
        padding-top: 50px !important;
    }
}

@media (max-width: 352px) {
    .wpb_button, body:not(.archive,.single-faq_questions,.home) .wpb_content_element:not(.text-block),{
        margin-bottom: 0px !important;
    }
}

@media (max-width: 478px) and (min-width: 360px) {
   body.page-id-10331 .iframe-calculator {
        height: 970px;
    }
}


body.page-id-10331 section.vc_custom_1522419223230 .wpb_content_element {
    margin-bottom: 0px !important;
}


body.page-id-10331 section#contact_numbers {
	background-color: #f3f3f3!important}

@media (max-width: 730px) {
	body.page-id-10331 div.about-currenge .btn {
		width: 100%!important;}
	body.page-id-10331 div.about-currenge .btn.right {
	    margin-top: 40px!important;
		}
}

body.page-id-10331 div.about-currenge .btn {
	min-width: 300px!important}

body.page-id-10331 section#contact_wording,
body.page-id-10331 section#contact_wording div,
body.page-id-10331 section#title,
body.page-id-10331 section#title div,
body.page-id-10331 section#first_section{
	background-color: rgb(0, 0, 0) !important;
	}

body.page-id-10331 section#contact_wording h3,
body.page-id-10331 section#contact_wording h3 span,
body.page-id-10331 section#title h1,
body.page-id-10331 section#first_section h3,
body.page-id-10331 section#first_section h3 span{
	color: white!important;}

body.page-id-10331 section#contact_wording p,
body.page-id-10331 section#first_section p {
	color: #45b6fe!important;
}
