/* Revision: 07-01 */

/* Section Titles */
.hero h1,
.products h2,
.services h2,
.values h2,
.contact h1 {
    margin-left: 10px;
    padding-left: 10px;
}

/* Navigation Section */
/* Add margin to the left */
/* Add margin to the right */
/*
.products {
    margin-left: 1rem !important; 
    margin-right: 1rem !important; 
}
*/
/* Dummy Section */
.dummy-section {
    padding: var(--header-height) 0  0;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    /* margin: 20px 0; */
    /*margin-left : 10 rem ;*/
    border : 2rem;
}

.section-icon {
    height: 3.0rem; /* 30px ÷ 16 = 1.875rem */
    margin-left: 2rem; /* the only way to push the whole setion-title from the left */
     box-shadow: 0.0 0.75rem 1.75rem rgba(0, 0, 0, 0.4); /* Add shadow to the icon */
}

.section-title h2 {
    font-size: var(--Font_Size_L);
    color: var(--Text_Color);
    display: flex;
    align-items: center; /* Center text vertically */
    /* height: 1.875rem; */ /* Match the height of the icon */
    
}

/* Hero Section */
.hero {
    position: relative;
    color: white;
    /* padding: 150px 0 100px; */
    /*padding: 150px ; */
    padding: 9.375rem 0 6.25rem; /* 150px ÷ 16 = 9.375rem, 100px ÷ 16 = 6.25rem */
    text-align: center;
    margin: 0;   
}

/* Media Query for Mobile */
@media screen and (max-width: 480px) {
    .hero {
        padding: 3.234rem 0 2.156rem; /* Half of 9.375rem and 6.25rem */ /* 4.6875rem 0 3.125rem */
    }
}

/* Watermark for background images */
.products::after,
.services::after,
.values::after,
.hero::after {
    content: "(c) STM";
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-family: Calibri, Arial, sans-serif;
    font-size: 6px;
    color: rgba(255, 255, 255, 0.7);
    z-index: 1;
    pointer-events: none;
}

.hero:before {
    content: "";
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
/*    background-image: url('../D_Asset/Sect_Hero.jpg'); */
    background-image: url('../D_Asset/RF_BackGround_03.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

.hero .container {
    position: relative;
    /* Adjust this value as needed */
    margin-top: 9.375rem; /* 150px ÷ 16 = 9.375rem; */
    margin-bottom: 11.25rem; /* 180px ÷ 16 = 11.25rem */
}

/* Media Query for Mobile */
@media screen and (max-width: 480px) {
    .hero .container {
        margin-top: calc(9.375rem * 0.345); /* 9.375rem * 0.345 ≈ 3.234rem */
        margin-bottom: calc(11.25rem * 0.345); /* 11.25rem * 0.345 ≈ 3.881rem */
    }
}

.hero h1 {
    font-family: var(--Font_Secondary); /* Use the secondary font for headings */
    font-weight: 900;
    font-size: var(--Font_Size_XL); /* Use the variable for h1 */    
    margin-bottom: 1.25rem; /* 20px ÷ 16 = 1.25rem */
}

.hero p {
    font-family: var(--Font_Primary); /* Use the primary font for paragraphs */
    font-size:var(--Font_Size_L); /* Use the variable for paragraphs */
    margin-top: -0px; /* Adjust this value as needed */
    margin-bottom: 1.875rem; /* 20px ÷ 16 = 1.25rem */ /* 30px  ÷ 16 = 1.875rem */
}

/* Products Section */
.products {
    position: relative;
    padding: 20px 0;
    color: var(--Product_White);
   /* margin: 0; */

}
.products { top:0px;}

.product .container{
    margin-left: 1rem !important; /* Add margin to the left */
    margin-right: 1rem !important; /* Add margin to the right */
}

.products:before {
    content: "";
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    background-image: url('../D_Asset/Sect_products.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}


.products .container {
    position: relative;
}

.products h2 {
    font-family: var(--Font_Secondary); /* Use the secondary font for headings */
    font-weight: 900;
    font-size:  var(--Font_Size_L); /* Use the variable for h2 */
    margin-bottom: 40px;
    color: var(--Product_Title);
}

.products h2 span {
    color: white ; /* var(--Blue_Title_1st_letter); */
}

.products p {
    font-family: var(--Font_Primary); /* Use the primary font for paragraphs */
    font-size: var(--Font_Size_S); /* Use the variable for paragraphs */
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 1rem;
    padding: 0;
}

.product-card {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin: 0;
}

.product-card img {
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
}

/* Services Section */
.services {
    position: relative;
    padding: 20px 0;
    color: var(--Service_White);
    margin: 0;
}

.services:before {
    content: "";
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    background-image: url('../D_Asset/Sect_services.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

.services .container {
    position: relative;
}

.services h2 {
    font-family: var(--Font_Secondary); /* Use the secondary font for headings */
    font-weight: 900;
    font-size:  var(--Font_Size_L); /* Use the variable for h2 */
    margin-bottom: 40px;
    color: var(--Service_Title); 
}

.services h2 span {
    color:  white ; /* var(--Blue_Title_1st_letter); */
}

.services p {
    font-family: var(--Font_Primary); /* Use the primary font for paragraphs */
    font-size: var(--Font_Size_S); /* Use the variable for paragraphs */
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 1rem;
    padding: 0;
}

.service-card {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin: 0;
}

.service-card img {
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
}

/* Values Section */
.values {
    position: relative;
    padding: 20px 0;
    color: var(--Blue_Logo);
    margin: 0;
}

.values:before {
    content: "";
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    background-image: url('../D_Asset/Sect_values.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

.values .container {
    position: relative;
}

.values h2 {
    font-family:  var(--Font_Secondary); /* Use the secondary font for headings */
    font-weight: 900;
    font-size: 36px;
    margin-bottom: 40px;
    color: var(--Blue_Logo);
}

.values h2 span {
    color: var(--Blue_Title_1st_letter);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 1rem;
    padding: 0;
}

.value-card {
    background-color: rgba(74, 84, 150, 0.1);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin: 0;
}

.value-card h3 {
    font-family: var(--Font_Secondary); /* Use the secondary font for card headings */
    font-weight: 700;
    font-size: var(--Font_Size_M);
    color: var(--Blue_Logo);
    margin-bottom: 15px;
}

.value-card p {
    font-family: var(--Font_Primary); /* Use the primary font for card paragraphs */
    font-size: var(--Font_Size_S);
    color: var(--Blue_Logo);
}

.value-card img {
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
}

/*------------------------------- */
.work-in-progress {
    display: var(--Under_Development, none);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    margin: 0 1rem; 
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    border: 2px dashed var(--Blue_Highlight_Dark);
    display: flex; /* Use flex instead of inline-flex */
}

.work-in-progress img {
    width: var(--Icon_Men_At_Work_Size);
    height: var(--Icon_Men_At_Work_Size);
    
     margin-right: 5px; /* Add space between icon and text */
}

.work-in-progress p {
    font-family: var(--Font_Primary);
    font-size: var(--Font_Size_S);
    color: var(--Blue_Logo);
    margin: 0;
}

/* Hide the work-in-progress notice by default */
.work-in-progress {
    /* display: none; */
    display: flex ;
    
}

/* Products Section */
.products h2 + .work-in-progress {
    display: block;
}


/* Show the work-in-progress notice if --Under_Development is 1 */
[style*="--Under_Development: 1"] .work-in-progress {
    display: flex;
}

/* Responsive Design for Sections */
@media screen and (max-width: 1080px) {
    .product-grid, .service-grid, .values-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media screen and (max-width: 768px) {
    .product-grid, .service-grid, .values-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media screen and (max-width: 480px) {
    .product-grid, .service-grid, .values-grid {
        grid-template-columns: 1fr;
    }
}