/*!
 Copyright (c) 2020, 2024, Oracle and/or its affiliates.
 */

:root{
--rw-palette-teal-170:#00343a;

}
.t-Header-navBar {
    display: none !important;}

    .imagecover {
        display: block; /* Ensures that margin auto works */
        margin: 0 auto; /* Centers the image horizontally */
        max-width: 100%; /* Ensures the image doesn’t overflow its container */
        height: auto; /* Maintains the aspect ratio */
    }

       /*  div#t_Body_title {
       // background-image: url('https://hiwpt-wp-cloud.maxapex.net/apex/r/ewa/161/files/static/v194/ewabg.png');
        background-image: url('https://hiwpt-wp-cloud.maxapex.net/apex/r/ewa/175/files/static/v125/SAUDINATIONAL.gif');
        background-size: cover;  Ensures the background covers the entire div 
        background-position: center; /* Centers the background image 
        position: relative; /* Ensures the overlay stays on top of the background 
       // height: 450px !important; /* Adjust height as needed 
        
    }*/
div#t_Body_title {
    background-image: url('https://hiwpt-wp-cloud.maxapex.net/apex/r/ewa/175/files/static/v125/SAUDINATIONAL.gif');
    background-size: contain;       /* Makes entire image visible */
    background-position: center;    /* Centers image horizontally and vertically */
    background-repeat: no-repeat;   /* Prevents tiling */
    background-color: #f0f0f0;      /* Fallback color for empty space */
    position: relative;             /* Keeps overlay content on top */
    height: 550px !important;       /* Fixed height */
    background-color: #00343a;
}

    /* Add white overlay 
    div#t_Body_title::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.6); /* White overlay with 50% opacity */*/
        /* Ensures the overlay appears above the background */
    }

    /* Content inside the div (if any) */
    div#t_Body_title * {
        position: relative;
        /* Ensures content is above the overlay */
    }
@media (max-width: 600px) {


    footer#t_Footer {
    display: none;
}
.menubtns .t-Button {
  margin: 20px 5px 0 5px !important;
}


.menubtns {
    display: block !important;}
    .text-container {
    
    padding-left: 10px !important;}
    .menubtns {

    padding-top: 50px !important;

    }    
        div#t_Body_title {
            height: 220px !important; /* Removes the fixed height for mobile */
        }
         .aboutbtns .t-Button {
            height: 20% !important;
             margin-inline-start:0px !important;
             font-family: 'Tajawal';
        padding: 4px 8px  !important; /* Reduce padding */
        font-size: 9px !important; /* Reduce font size */
        transform: scale(1); /* Ensure no scaling on mobile */
    }

    /* Ensure smaller gap between buttons on mobile */
    .aboutbtns {
        gap: 1px !important; /* Decrease gap between buttons */
        padding-right: 4px !important; /* Adjust padding for mobile */
    }

     
    }
.t-Body-main {
 background-image: url(https://static.oracle.com/cdn/apex/21.1.0/themes/theme_42/1.6/images/rw/textures/texture-11.png)   
}
.rw-pillar--teal .t-Body-title:after, .rw-pillar--teal.rw-layout--fixed .t-Body-mainContent:before {
    background-image: none !important;
    background-color: #00343a;
    
}
.t-Body-title {
    z-index: 0;
}
/* Container holding the buttons with class aboutbtns */
.aboutbtns {
    display: flex; /* Use flexbox for alignment */
    justify-content: flex-end; /* Align buttons to the right */
    gap: 10px; /* Add space between the buttons */
    padding-right: 20px; /* Add some padding to the right for spacing */
 
   
}

/* Style the buttons */
.aboutbtns .t-Button {
    height: 20% !important;
    background-color: #ef6f21; /* Base color */
    color: white; /* Text color */
    border: none; /* Remove border */
    padding: 10px 20px; /* Add padding for larger clickable area */
    cursor: pointer; /* Change cursor on hover */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
    border-radius: 20px; /* Increase border radius for more rounded corners */

}

/* On hover: darken color and enlarge button */
.aboutbtns .t-Button:hover {
    background-color: #d85f1c; /* Darkened color */
    transform: scale(1.1); /* Slightly enlarge button */
}

/* Optional: Add some additional style */
.aboutbtns .t-Button {
    border-radius: 20px; /* Adjusted for more roundness */
}
/* Apply Tajawal font to all elements 
body, p, h1, h2, h3, h4, h5, h6, button, input, span, div {
    font-family: 'Tajawal', 'Futura', sans-serif;
}*/
body {
   // font-family: 'Tajawal';
    font-family: 'Tajawal', 'Futura', sans-serif;
}

img#P1_NEW {
    margin-top: -40px;
    height: auto;
    display: block;
}

/* Container for the buttons */
.menubtns {
    padding-top: 7% !important;
    
    font-family: 'Tajawal';
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center buttons horizontally */
    align-items: center; /* Center buttons vertically (if needed) */
    padding: 10px;  /*Optional: Add padding around the container */
        text-align: center;
}

/* Style the buttons */
.menubtns .t-Button {
    background-color: #009694; /* Base color */
    color: white; /* Text color */
    border: none; /* Remove border */
   padding: 10px 20px; /*  Add padding for larger clickable area */
    cursor: pointer; /* Change cursor on hover */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
    
    border-radius: 20px; /* Increase border radius for more rounded corners */
    margin: 0 5px; /* Optional: Add margin between buttons */
}

/* On hover: darken color and enlarge button */
.menubtns .t-Button:hover {
    background-color: #027775; /* Darkened color */
    transform: scale(1.1); 
}
.ui-dialog .ui-dialog-titlebar:before {
   
   display:none;
}

/* CARDS */

/* Card General Styles */
.t-Body-mainContent {
    z-index: 1;}

/* Default Button Styling */
.btnorange {
    font-family: 'Tajawal';
    background-color: #ef6f21; /* Orange color */
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    display: block;
    margin: 0 auto; /* Centers the button within the region */
}

/* Hover Effect: Enlarges and darkens the color */
.btnorange:hover {
    background-color: #d35c1c; /* Darker orange */
    transform: scale(1.05); /* Enlarges slightly */
}

/* Focus Styling */
.btnorange:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(239, 111, 33, 0.8); /* Slight shadow effect */
}

.btnoranges {
    font-family: 'Tajawal';
    background-color: #ef6f21; /* Orange color */
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    display: block;
    margin: 0 auto; /* Centers the button within the region */
}

/* Hover Effect: Enlarges and darkens the color */
.btnoranges:hover {
    background-color: #d35c1c; /* Darker orange */
    transform: scale(1.05); /* Enlarges slightly */
}

/* Focus Styling */
.btnoranges:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(239, 111, 33, 0.8); /* Slight shadow effect */
}
.btngrey {
    background-color: grey; /* Orange color */
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    display: block;
    margin: 0 auto; /* Centers the button within the region */
}

/* Hover Effect: Enlarges and darkens the color */
.btngrey:hover {
    background-color: rgb(80, 77, 77); /* Darker orange */
    transform: scale(1.05); /* Enlarges slightly */
}

/* Focus Styling */
.btngrey:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(56, 53, 51, 0.8); /* Slight shadow effect */
}
.ui-dialog .ui-dialog-titlebar {
background-color: #009694;


}
.ui-dialog .ui-dialog-title {

    -webkit-text-fill-color: white;
}




/* Input fields styling */
.t-Form-itemWrapper input{
  width: 100%;
  //padding: 12px 45px 12px 15px; /* Room for the icon */
  border: 2px solid #4DB6AC;
  border-radius: 25px;
  //background-color: #4DB6AC;
  color: black;
  font-size: 16px;
}
.t-Form-itemWrapper  select{
  width: 100%;
  //padding: 12px 45px 12px 15px; /* Room for the icon */
  border: 2px solid #4DB6AC;
  border-radius: 25px;
  //background-color: #4DB6AC;
  color: black;
  font-size: 16px;
}

.t-Form-itemWrapper input::placeholder {
  color: white;
}

/* Icons inside input fields */
.apex-item-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  //transform: translateY(-50%);
  color: black;
  font-size: 18px;
  //display: none;
}

/* Checkbox styling */
.apex-item-group--rc .apex-item-option label {
  color: #4CAF50; /* Green color for checkbox text */
  margin-left: 10px;
}

.apex-item-checkbox input {
  margin-left: 0;
}

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

.aboutbtns .t-Button-label{

     font-family: 'Tajawal';
}

div#t_Alert_Notification {
    z-index: 99999999999;
}

.t-Body-alert {
    Z-INDEX: 9999999999999999;
}
#P1_HEADERIMAGE{
    display: none !important;
}
.display_image {
    display: none;
}