/* 
xs  <576px	
sm  ≥576px	
md  ≥768px	
lg  ≥992px	
xl  ≥1200px	
xxl ≥1400px 
*/

/* ============================================================================= 
			    		       	    Banner  		    					  
============================================================================= */

.contactus-banner {
    background-color: rgb(18, 35, 62);
    padding: 1.5rem 0; 
}

.contactus-banner .contactus-banner-title {
    font-size: 1.75rem; 
    font-weight: bold;
}

.contactus-banner .contactus-banner-content {
    font-size: 1rem;
}

/* ============================================================================= 
			    		       	help-request-section  		    					  
============================================================================= */

.help-request-section .help-request-info-container {
    display: flex;
    align-items: center;
}

.help-request-section .help-request-info {
    margin: auto;
    display: block;
}
.help-request-section .help-request-info .help-request-content {
    font-family:'Times New Roman', 'Times', 'serif';
}
.help-request-section .help-request-info .help-request-address {
    font-size: 1rem;
}
@media (min-width: 992px) {
    .help-request-section {
        margin-top: 5rem;
    }
	.help-request-section .help-request-info .help-request-content {
        font-size: 2rem; 
    }
}
@media (max-width: 992px) {
    .help-request-section {
        margin-top: 2rem;
    }
	.help-request-section .help-request-info .help-request-content {
        font-size: 1.5rem; 
    }
}

.help-request-form-container {
    /* display: */
}
.help-request-form {
    background-color: rgb(18, 35, 62);
    border-radius: .75rem;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);


   
    margin: auto;
    max-width: 450px;
}
.help-request-form .form-title {
    font-size: 1.5rem;
    font-weight: bold;
    padding-top: 2rem;
    padding-bottom: .75rem;
}
.help-request-form input {
    border-radius: .75rem;
}

/* ============================================================================= 
			    		       	social-proff-section  		    					  
============================================================================= */
.social-proff-section {
    background-color: rgb(18, 35, 62);
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

/* Main title  */
.social-proff-section .social-proff-title {
    color: white;
    font-family: helvetica;
    font-weight: bold;
}

/* card title */
.social-proff-section .social-proff-subtitle {
    color: #FF6161;
    font-family: helvetica;
    font-size: 1rem;
    font-weight: bold;
}

/* card content */
.social-proff-section .social-proff-content {
    font-family: helvetica;
    font-weight: bold;
}

/* " */
.social-proff-section svg {
    margin: 0;
    padding: 0;
}

.social-proff-section .card {
    display: flex;
    align-items: center;
}

.social-proff-card-content {
    display: block;
    margin: auto;
    padding: 2rem;
    height: auto;
    color: white;
    text-align: center;
    isolation: isolate;
}

.social-proff-card-first,
.social-proff-card-middle,
.social-proff-card-last {
    font-family: Arial;
    position: relative;
    background-color: rgb(4, 81, 132);
}

/* Common styles for all ::before pseudo-elements */
.social-proff-card-first::before,
.social-proff-card-middle::before,
.social-proff-card-last::before {
    background-size: auto 100%;
    background-repeat: no-repeat;
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.25;
}
/* Unique background images for each card */
.social-proff-card-first::before {
    background-image: url('./img/social-proff-1.png');
}

.social-proff-card-middle::before {
    background-image: url('./img/social-proff-2.png');
}

.social-proff-card-last::before {
    background-image: url('./img/social-proff-3.png');
}



@media (min-width: 1120px) {
    .social-proff-section {
        margin-top: 5rem;
    }
    .social-proff-section h1 {
        font-size: 2.5rem;
        margin: 2.5rem 0;

    }
    
    .social-proff-card-first,
    .social-proff-card-middle,
    .social-proff-card-last 
    {
        min-height: 50vh;
    }
    .social-proff-card-first::before,
    .social-proff-card-middle::before,
    .social-proff-card-last::before 
    {
        background-size: 100% auto;
    }
}
@media (min-width: 992px) and (max-width: 1120px) {
    .social-proff-section {
        margin-top: 5rem;
    }
    .social-proff-section h1 {
        font-size: 2.5rem;
        margin: 2.5rem 0;

    }
    
    .social-proff-card-first,
    .social-proff-card-middle,
    .social-proff-card-last 
    {
        min-height: 50vh;
    }
    .social-proff-card-first::before,
    .social-proff-card-middle::before,
    .social-proff-card-last::before 
    {
        background-size: auto 100%;
    }
}
@media screen and (max-width: 992px) {
    .social-proff-section {
        margin-top: 2rem;
    }
    .social-proff-section h1 {
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 576px) {
    .social-proff-card-first::before, 
    .social-proff-card-middle::before,
    .social-proff-card-last::before 
    {
        background-size: 100% auto;
    }
}

/* ============================================================================= 
			    		       	testimonial-section  		    					  
============================================================================= */
.testimonial-section {

}
.testimonial-title {
    font-weight: normal;
    font-family: "roboto-thin";
    font-style: italic;
    
}

.testimonial-info-container {
    display: flex;
    align-items: center;
}

.testimonial-info {
    margin: auto;
    display: block;
    font-family:'sans-serif';
}
.testimonial-content {
    font-size: medium;
}

@media (min-width: 992px) {
    .testimonial-section {
        margin-top: 5rem;
    }
	.testimonial-content {
        font-size: 2rem; 
    }
}
@media (max-width: 992px) {
    .testimonial-section {
        margin-top: 2rem;
    }
	.testimonial-content {
        font-size: 1.5rem; 
    }
}

.testimonial-form-container {
    /* display: */
}
.testimonial-form {
    background-color: rgb(18, 35, 62);
    border-radius: .75rem;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);


   
    margin: auto;
    max-width: 450px;
}
.testimonial-form-title {
    font-family: "roboto-thin";
    font-size: 2rem;
    padding-top: 2rem;
    padding-bottom: .75rem;
    font-style: italic;
}

/* ============================================================================= 
			    		       	monthly-update-section  		    					  
============================================================================= */

.monthly-update-form-title {
    color: rgb(200, 101, 103);
    font-weight: normal;
}

@media (min-width: 1200px) {
    .monthly-update-section {
        /* border: solid blue 5px;  */
        height: 80vh;
        /* background-color: rgb(240, 240, 240); */
        position:relative;
        
    }
    .monthly-update-img {
        display: block; /* Makes the image a block-level element */
        width: auto;    /* Width adjusts based on the aspect ratio */
        height: 60vh;   /* Height set to 60% of the viewport height */
        margin-top: 10vh; /* 10% of viewport height margin on top */
        margin-right: 10vw; /* 10% of viewport width margin on the right */
        margin-left: auto;   /* Center the image horizontally */
        /*border: 3px solid red;*/ /* Optional: border for visibility */
    }

    .monthly-update-form {
        position: absolute;             /* Position the form absolutely within the container */
        top: 10vh;                      /* Start the form 20% from the top of the container */
        left: 30%;                      /* Position the form in the center horizontally */
        transform: translateX(-50%);    /* Center the form exactly (offset it by 50%) */
        background-color: white;        /* White background for the form */
        padding: 5%;                  /* Padding inside the form */
        border-radius: 8px;             /* Rounded corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Soft shadow around the form */
        width: 100%;                    /* Form takes full width of the container */
        max-width: 45vw;               /* Limit the max width to 500px */
        z-index: 10;                    /* Ensure the form is above the image */
    }
}


/* 



.monthly-update-img-container {
    display: block;
    }

.monthly-update-img {
    background-image: url('./img/contactus-monthly-update.png');
    background-repeat: no-repeat;
}
    
.monthly-update-title {
    color: red;
    font-size: 2rem;
}

@media (max-width: 1200px) {
    .monthly-update-img {
        position: relative;
        margin-right: 0;
        border: red solid 5px;
        height: 40vh;
        background-size: auto 100%;
        background-position: right bottom;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    .monthly-update-img {
        border: blue solid 5px;
        height: 50vh;
        background-size: 100% auto;
        margin-right:10%;
    }
}
@media (max-width: 768px) {
    .monthly-update-img {
        border: blue solid 5px;
        width: 100%;
        height: 20rem;
        background-size: 100% auto;
    }
    .monthly-update-form {
        width: 100%;
    }
} 
*/