/*===========GOOGLE IMPORT FONT STYLE=========*/

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

/*=======VARIALBLE DECLARTIONS CSS AREA========================================*/


:root{
    

    /*===========HEADERS=========*/

    --header-height: 1rem;
    
    /* FONT */
    --font-family: "Quicksand", serif;
    --font-size-header1: 1.5rem;
    --normal-font-size: .985rem;
    --font-weight-normal: 400;
    --font-weight-medium: 600;
    --font-weight-large: 700;
    --font-style: normal;
    --body-background-color-lightwhite: #fefefe;
    --font-color-white: #fff;
    --font-color-black: black;
    
        

    /* BACKGROUND */
    
    --nav-text-shadow-on-hover: text-shadow: 2px 2px 4px #000000;
    --background-image-free-assessment: url(Images/main-bg-image.jpg);
    --background-color-dark-orange: #f69542;
    --background-color-dark-orange-rgba: rgb(246, 149, 66);
    --background-color-dark-blue: #13558d;  
    --background-color-lighter-dark-blue: #0c4576;  
    --background-color-lighter-blue: #4484bb; 
    --nav-background-color-pure-white: #fff;
    --nav-background-hover-color: #f5f5f5;
    --background-pure-white: #fff;
    --background-darker-white: #f9f9f9;


        /*===========HEADER Shadow Boxing=========*/


    /* border-bottom: 1px solid rgba(107, 107, 107, 0.785);
    -webkit-box-shadow: 0px 10px 9px -9px rgba(66, 68, 90, 1);
    -moz-box-shadow: 0px 10px 9px -9px rgba(66, 68, 90, 1);
    box-shadow: 0px 10px 9px -9px rgba(66, 68, 90, 1); */

    /*===========INDEX FOR THE HTML=========*/
    
    --z-tooltip: 10;
    --z-fixed: 100;
}

    /*===========RESPONSIVE AND TYPHOGRAPHY=========*/

@media screen and (min-width: 1162px) {
        :root{
            --normal-font-size: 1rem;
            
        }
        
    }

/*===========BASE CSS START HERE=========*/

*{
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    list-style-type: none;
    scroll-behavior: smooth;
    text-decoration: none;
    list-style: none;
    transition: .1s ease;
    
    
}



/*=============== REUSABLE CSS CLASSES ===============*/
.container {
    max-width: 1162px; /* Adjust as needed */
    margin: 0 auto; /* Centers the container */
    padding-inline: 1.5rem; /* Add padding for spacing */
    
  }

a{
    text-decoration: none;
}

ul{
    list-style: none;
}

/*======================BODY CSS START HERE====================*/
body{
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    display: flex;
    justify-content: center;
    width: 100%;
    
}

html{    
    display: flex;
    justify-content: center;  
    width: 100%;
}

/*======================CONTENT CSS START HERE====================*/


.body__wrapper{
    width: 100dvw;
    background: var(--nav-background-color-pure-white);
    display: flex;
    flex-direction: column;
    position: relative;
    top: 5rem;    
    text-align: center;
    justify-content: center;
    align-items: center;
    
}

.headlines__container {

    width: 100dvw;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background-color: var(--background-color-dark-orange);
    color: var(--font-color-white);
    font-weight: var(--font-weight-medium);
    padding-block: 2rem;
} 

.custom-alert {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--background-color-dark-orange);
    color: var(--font-color-white);
    padding: 15px;
    border-radius: 5px;
    z-index: 1000;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family);
}



.headlines__container > .container,
.subheadlines__container > .container,
.whatweoffer__container > .container ,
.process__container > .container,
.whoweare__container > .container,
.management__container > .container,
.latestoffer__container > .container,
.footer__container > .container,
.privacyandterms__container > .container{


    width: 100%;
    max-width: 1162px;
    display: flex;
    padding-inline: 1rem;
    gap: 1rem;
    height: 100%;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.headlines__container > .container > .left__headlines{

    display: flex;
    flex-direction: column;
    line-height: 2rem;
    height: 100%;
    text-align: center;
}

.headlines__container > .container > .left__headlines h1{

    color: var(--background-color-dark-blue);
      

}

.headlines__container > .container > .left__headlines p{

    font-size: 1.25rem;
    text-align: justify;
    

}

/* RIGHT HEADLINES START HERE */

.headlines__container > .container > .right__headlines{

    display: flex;
    height: 100%;
    justify-content: center;
    text-align: center;
    align-items: center;
    align-content: center; 
    background: var(--background-color-dark-blue);  
    border-radius: 5px;     

    -webkit-box-shadow: inset 8px 8px 18px -13px rgba(0, 0, 0, 1);
    -moz-box-shadow: inset 8px 8px 18px -13px rgba(0, 0, 0, 1);
    box-shadow: inset 8px 8px 18px -13px rgba(0, 0, 0, 1);
}  

        
.form__container{ 
        
 
    display: flex;
    flex-direction: column-reverse;
    font-size: var(--normal-font-size);
    height: 100%;
    width: 100%;
    justify-content: center;
}

 /* LEFT SIDE OF THE RIGHT HEADLINES (FORM CONTAINER) */
    
 .form__container > .left__side {


    display: flex;
    flex-wrap: wrap;
    flex-direction: auto;
    font-size: var(--normal-font-size);
    height: 100%;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--font-color-white);
}

.left__side i, .left__side .title{
    color: var(--font-color-white);
    font-size: calc(var(--normal-font-size) + .2rem);
    font-weight: var(--font-weight-medium);
    
}

.form__container .left__side .detail
.text__one, 
.text__two, 
.text__three{

color: var(--background-color-dark-blue);
font-weight: var(--font-weight-medium);

}

.left__side a{
    text-decoration: none;
    color:var(--background-color-dark-orange);
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
}
.left__side a:hover{
    color: var(--background-color-dark-orange);
}

#pdpact{
    color: var(--font-color-white);
    text-decoration: underline;
    
}

#pdpact:hover{
    color: var(--background-color-dark-orange);
    text-decoration: underline;
}


/* SUB HEADLINES START HERE */
   
.subheadlines__container{
    width: 100dvw;
    display: flex;
    flex-wrap: wrap;
    height: auto;
    background-color: var(--background-color-dark-blue);
    color: var(--font-color-white);
    font-family: var(--font-family);  

}
/* RESUABLE CSS for VMV START HERE  */
.vmv__container{ 
    padding-block: 1rem;
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    height: 100%;
    width: 100%;        
    align-items: start;
    gap: 1rem;   
    flex-wrap: wrap;
}
/* RESUABLE CSS for WHATWEOFFER START HERE  */
.whatweoffer__container{ 
    display: flex;    
    width: 100dvw;
    height: auto;
    background-color: var(--background-pure-white);
    font-size: var(--normal-font-size);
    font-family: var(--font-family);
    justify-content: space-evenly;
}
/* RESUABLE CSS for whoweare START HERE  */
.whoweare__container{
    display: flex;    
    width: 100dvw;
    height: auto;
    background-color: var(--background-darker-white);
    font-size: var(--normal-font-size);
    font-family: var(--font-family);
    justify-content: space-evenly;
}
/* RESUABLE CSS for aboutus START HERE  */
.aboutus__container{    
    display: flex;
    width: 100%;
    max-width: 1162px;
    font-family: var(--font-family);
    font-size: calc(var(--normal-font-size) + .4rem);
    gap: 2rem;
    flex-wrap: wrap;
}
/* RESUABLE CSS for process START HERE  */
.process__container{
    display: flex;    
    width: 100dvw;
    height: auto;
    background-color: var(--background-pure-white);
    font-size: var(--normal-font-size);
    font-family: var(--font-family);
    justify-content: space-evenly;
    color:var(--font-color-white);
}
/* RESUABLE CSS for Management__Team START HERE  */
.management__container{
    display: flex;    
    width: 100dvw;
    height: auto;
    background-color: var(--background-color-dark-orange);
    font-size: var(--normal-font-size);
    font-family: var(--font-family);
    justify-content: space-evenly;
    color:var(--font-color-white);
}
/* RESUABLE CSS for Slider__Container START HERE  */
.latestoffer__container{
    display: flex;    
    width: 100dvw;
    height: auto;
    background-color: var(--background-darker-white);
    font-size: var(--normal-font-size);
    font-family: var(--font-family);
    justify-content: space-evenly;
    color:var(--font-color-white);
    padding: 1rem;
}
.slider__container{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0rem 0rem;
    gap: 2rem; 
}
/* RESUABLE CSS for FOOTER START HERE  */
.footer__container{
    display: flex;    
    width: 100dvw;
    height: auto;
    background-color: var(--background-pure-white);
    font-size: var(--normal-font-size);
    font-family: var(--font-family);
    justify-content: space-evenly;
    color:var(--background-color-dark-blue);
    padding-top: 4rem;
}


.footercontent__container > div a{
    color: var(--background-color-dark-blue);
}
.footercontent__container > div a:hover{
    color: var(--background-color-dark-orange);
}

/* TERMS and PRIVACY CONTENT START HERE */


.privacyandterms__container{
    width: 100dvw;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background-color: var(--background-color-dark-blue);
    color: var(--font-color-white);
    font-weight: var(--font-weight-medium);
    padding: 2rem;
    font-family: var(--font-family);
    

}
 .designer__container{

    height: auto;
    width: 100dvw;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background-color: var(--background-color-dark-blue);
    color: var(--font-color-white);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family);
}

.designer__container a{
    color: var(--font-color-white);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family);
    transition: .3s;
}
.designer__container a:hover{
    color: var(--background-color-dark-orange);

}

.privacyterms__container{
 
    width: 100%;
    height: 100%;
    color: var(--font-color-white);
    display: flex;



}

.footer__list{
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 2rem;
    text-align: center;

}

.privacyterms__container ul .footer__text a{
    display: flex;
    list-style-type: none;
    text-decoration: none;
    font-size:var(--normal-font-size);
    font-weight: var(--font-weight-medium);
    color: white;
    transition: .4s;
    

}

.privacyterms__container ul .footer__text a:hover{
    display: flex;
    font-size:var(--normal-font-size);
    font-weight: var(--font-weight-medium);
    color: var(--background-color-dark-orange);
    

}



/* MODAL CSS STARTS HERE */

/* Modal Styles */
.modal, .privacymodal, .data__modal {
    display: none; 
    position: fixed; 
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9); 
}

.data__modal {
    display: none; 
    position: fixed; 
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9); 
    
}

.modal-content, .privacymodal-content, .data-content{
    background-color: var(--background-pure-white);
    font-family: var(--font-family);
    color: var(--background-color-dark-blue);
    line-height: 3rem;
    margin: 6% auto; /* 15% from the top and centered */
    padding: 2.5rem;
    border-radius: 10px;
    width: 90%; /* Could be more or less, depending on screen size */
    max-width: 1250px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    text-align: justify;
    
 
}



.modal-content h1, .privacymodal-content h1, .datamodal-header{
    text-align: left;
}

.data-content p, .data-content li, label{
    font-weight: var(--font-weight-medium);

}
.data-content h1{
    color: var(--background-color-dark-orange);

}



.modal-content p, .privacymodal-content p,
.modal-content li, .privacymodal-content li{
    font-weight: var(--font-weight-medium);
}

.datamodal-footer .close-btn{
    padding: 1rem 2rem;
    color: gray;
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    background-color: var(--background-darker-white);
    border: none;
    border-radius: 5px;
    box-shadow: inset 7px 7px 4px -6px rgba(0,0,0,1);
    transition: .4s;
    pointer-events: none;
}

.datamodal-footer .close-btn-enable{
    padding: 1rem 2rem;
    color: var(--font-color-white);
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    background-color: var(--background-color-dark-orange);
    border: none;
    border-radius: 5px;
    box-shadow: 7px 7px 4px -6px rgba(0,0,0,1);
    cursor: pointer;
    transition: .4s;
}



.datamodal-footer .close-btn-enable:active{
    padding: 1rem 2rem;
    color: var(--background-color-dark-orange);
    font-family: var(--font-family);
    font-weight: var(--font-weight-medium);
    background-color: var(--background-color-dark-blue);
    border: none;
    border-radius: 5px;
    box-shadow: inset 7px 7px 4px -6px rgba(0,0,0,1);
    transition: .4s;
    cursor: pointer;
}


/* Close button */
.close, .privacyclose {
    color: var(--background-color-dark-blue);
    float: right;
    font-size: 2rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.close:hover,.close:focus, .privacyclose:hover, .privacyclose:focus{
    color: var(--background-color-dark-orange);
    text-decoration: none;
    cursor: pointer;
}

.modal-content h1, .modal-content h2, .privacymodal-content h1, .privacymodal-content h2{
    color:var(--background-color-dark-orange);

}


















/*============================ RESUABLE CSS ENDS HERE ============================ */

/*============================ DEVICES START HERE ============================ */

/* NAGIVATION FOR MOBILE DEVICES *//* NAGIVATION FOR MOBILE DEVICES */
@media screen and (max-width: 1162px) {

    .headlines__container > .container,
    .subheadlines__container > .container {
       
        flex-wrap: nowrap;
        flex-direction: column;
        height: 100%;
        width: 100%;
 
    }
    
    .headlines__container > .container > .left__headlines{
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        height: 100%;
        max-width: 90%;
    }
    /* THIS AREA IS FOR RIGHT HEADLINES  */
    
    .headlines__container > .container > .right__headlines{
        display: flex;
        height: 100%;
        padding-block: 1rem;
        width: 100%;
        max-width: 34.8rem;
        justify-content: center;
        text-align: center;
        align-items: center;
        align-content: center;        
    }  
    
    .form__container{        
        display: flex;
        flex-direction: column-reverse;
        font-size: var(--normal-font-size);
        height: 100%;
        width: 100%;
        justify-content: center;
    }
    
    
    /* LEFT SIDE OF THE RIGHT HEADLINES (FORM CONTAINER) */
    
    .form__container > .left__side {
    
        flex-direction: auto;
        font-size: var(--normal-font-size);
    }

    .left__side i, 
    .left__side 
    .title{
        color: var(--background-color-dark-orange);
        font-size: calc(var(--normal-font-size) + .2rem);
        font-weight: var(--font-weight-medium);
        
    }

    .form__container .left__side .detail
    .text__one, 
    .text__two, 
    .text__three{

    color: var(--font-color-white);
    font-weight: var(--font-weight-medium);

    
    }
    
    .left__side a{
        text-align: none;
        color:var(--font-color-white);
        font-family: var(--font-family);
        font-weight: var(--font-weight-medium);
    }
    .left__side a:hover{
        color: var(--background-color-dark-orange);
    }
    
    
    /* RIGHT SIDE OF THE RIGHT HEADLINES */
    
    .form__container > .right__side{
        display: flex;
        flex-direction: column;
        font-size: var(--normal-font-size);
        height: 100%;
    }
    
    .form__container > .right__side .title__text{
        font-size: 2rem;
        font-weight: var(--font-weight-large);
        text-align: start;
        color: var(--background-color-dark-orange);
        padding-inline: 1rem;
        
    }
    
    .form__container > .right__side #contactForm{
        padding-block: 1rem;
        backdrop-filter: blur(20%);
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        gap: 1rem;
    }
    
    .form__container > .right__side #contactForm .input__box input{    
        border-radius: 5px;
        border-color: none;
        border: none;
        width: 95%;
        padding: .5rem;
        color: var(--background-color-dark-blue);
        font-family: var(--font-family);
        font-weight: var(--font-weight-large);
        font-size: 1rem;
        
        -webkit-box-shadow: -1px -5px 30px -9px rgba(66, 68, 90, 0.38);
        -moz-box-shadow: -1px -5px 30px -9px rgba(66, 68, 90, 0.38);
        box-shadow: -1px -5px 30px -9px rgba(66, 68, 90, 0.38);
    }
    
    .form__container .right__side .message__box textarea{
        height: 7rem;
        resize: none;
        width: 95%;
        /* border: none; */
        border: none;
        border-radius: 5px;
        background: var(--nav-background-color-pure-white);
        color: var(--background-color-dark-blue);
        padding-left: .5rem;
        padding-top: .2rem;
        font-family: var(--font-family);
        font-weight: var(--font-weight-large);
        font-size: 1rem;
        
        -webkit-box-shadow: -1px -5px 30px -9px rgba(66, 68, 90, 0.38);
        -moz-box-shadow: -1px -5px 30px -9px rgba(66, 68, 90, 0.38);
        box-shadow: -1px -5px 30px -9px rgba(66, 68, 90, 0.38);
   
    }
    
    .consent{
      
        display: flex;
        font-size: var(--normal-font-size);
        color: var(--font-color-white);
        justify-content: center;
        text-align: justify;
        align-items: start;
        width: 100%;
        padding-inline: 1rem;
        gap: .5rem;    
        
    }
    
    
    .right__side .send__button{
        padding: 0rem 1rem 0rem 1rem;
    
    }
    
    .right__side .send__button button{        
        padding: .5rem .5rem .5rem .5rem;
        border-radius: 2px;
        border: none;
        padding: .5rem;
        font-family: var(--font-family);
        font-weight: var(--font-weight-medium);
        color: var(--font-color-white);
        box-shadow:  var(--box-shadow-dark);
        background-color: var(--background-color-dark-orange);
        transition: .3s;
        box-shadow: 7px 7px 4px -6px rgba(0,0,0,1);
        display: flex;
        float: right;
    }
    .right__side .send__button button:hover {
        background-color: var(--background-color-lighter-blue); /* Change color on hover */
        box-shadow: 7px 7px 4px -2px rgba(0,0,0,1);
    }

    .right__side .send__button button:active {
        color: var(--background-color-dark-blue);
        box-shadow: inset 7px 7px 4px -6px rgba(0,0,0,1);
    }

    /* Disabled state for button-sendnow */
    button.button-sendnow:disabled {
        background-color: #ccc; /* Gray background for disabled state */
        color: #666; /* Dimmed text color */
        cursor: not-allowed; /* Show not-allowed cursor */
        box-shadow: none; /* Remove shadow for disabled state */
        transform: none; /* Remove hover effects */
    }

    /* Enabled state for button-sendnow (on hover) */
    button.button-sendnow:not(:disabled):hover {
        background-color: var(--background-color-lighter-blue); /* Change color on hover */
        transform: translateY(-2px); /* Add a hover effect */
        box-shadow: 7px 7px 4px -2px rgba(0, 0, 0, 1);
    }

    /* Active state for button-sendnow */
    button.button-sendnow:not(:disabled):active {
        background-color: var(--background-color-dark-blue); /* Darker background on click */
        color: var(--font-color-white); /* Ensure text is readable */
        box-shadow: inset 7px 7px 4px -6px rgba(0, 0, 0, 1);
        transform: translateY(0); /* Reset transform on click */
    }

    /* SUBHEADLINES START HERE */

    .vmv__container{    
       
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 1rem;   
        justify-content: center;
        align-items: start;
   
     }
     .vision__container,
     .mission__container,
     .values__container{ 
        
        display: flex;
        height: auto;
        text-align: center;
        align-content: space-between;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
         
         
     }    
    .vision__container  i,
    .mission__container  i,
    .values__container i{

        font-size: 4rem;
        width: 100%;
        height: 100%;
    }
    .vision__container  h1,
    .mission__container  h1,
    .values__container  h1{
        
        text-align: center;
        align-items: start;
        font-size: 3rem;
        color: var(--background-color-dark-orange); 
    }      
    .vision__container  p,
    .mission__container  p,
    .values__container  p{
        line-height: 2rem;
        font-weight: var(--font-weight-medium);
        text-align: center;   
    } 


    /* CSS for whatweoffer START HERE  */
    .offer__container{ 
   
      
        display: flex;
        flex-wrap: wrap;
        height: auto;
        width: 100%;
        padding-block: 2rem;
        padding-inline: 2rem;
        text-align: center;
        align-items: center;
        gap: 2rem;
        justify-content: center;


    }

    .title__container{
  
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .title__container h1{
        color: var(--background-color-dark-blue);
    }
    .title__container p{
        color: var(--background-color-dark-blue);
        font-size: var(--normal-font-size);
        font-weight: var(--font-weight-medium);
    }

    .student__container,
    .business__container,
    .visit__container{      
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        
        border-radius: 5px ;
        height: 15rem;
        width: 15rem;
        align-content: baseline;
        line-height: 2rem;
        padding-inline: 1rem;
        text-align: start; 
        -webkit-box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
        -moz-box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
        box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);

    }

    .student__container h3,
    .business__container h3,
    .visit__container h3{      
        color:white;
        position: relative;
        top: 50%;
        transition: .5s ease-in-out;
    }

    
    .student__container p,
    .business__container p ,
    .visit__container p{      
        color:white;
        position: relative;
        top: 50%;
        transition: .5s ease-in-out;
        opacity: 0;
        font-weight: var(--font-weight-medium);
    }

    .student__container:hover h3,
    .business__container:hover h3,
    .visit__container:hover h3{      
        color:var(--background-color-dark-orange);
        position: relative;
        top: 0;
        font-weight: var(--font-weight-large);
        transition: .5s ease-in-out;
        font-size: var(--font-size-header1);
    }

    
    .student__container:hover p,
    .business__container:hover p ,
    .visit__container:hover p{      
        color:var(--font-color-white);
        position: relative;
        top: 0;
        transition: .5s ease-in-out;
        opacity: 1;
    }


    .student__container{
        background-image: url(/img/studentcontainerbackground.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        background-blend-mode:darken;
        
    }
    .business__container{
        background-image: url(/img/businesscontainerbackground.png);
        background-size:cover;
        background-repeat: no-repeat;
        
    }

    .visit__container{
        background-image: url(/img/visitcontainerbackground.png);
        background-size:cover;
        background-repeat: no-repeat;
    }

    /* WHO WE ARE SECTION START HERE */

    .aboutus__container{
        height: auto;
        display: flex;
        max-width: 1162px;
        padding-block: 2rem;
        flex-wrap: wrap;
        flex: auto;    
        justify-content: center;    
    }
    .left__whoweare img{
       
        width: 100%;  
        max-width: 36.3125rem;  
        height: auto;
        background-repeat: no-repeat;
        border-radius: 10px;
        opacity: 80%;

        -webkit-box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
        -moz-box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
        box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
    }
    .right__whoweare{        

        text-align: center;
        color: var(--background-color-dark-blue);

    }

    .right__whoweare :nth-child(3){        
        padding-top: 2rem;
        font-weight: var(--font-weight-medium);
    }
    .read__more{

        width: 100%;
        font-size: 1.2rem;
        color: var(--background-color-dark-blue);
        text-decoration: none;
    }
    

    /*CSS for procedure START HERE  */

    .procedure__container{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        padding: 1rem 1rem;
        gap: 2rem;
        justify-content: space-evenly;
        
    }

    .procedure__container > .hiring__container{

        color: var(--background-color-dark-blue);
        display: flex;
        justify-content: space-evenly;
        align-items: start;
        flex-wrap: wrap;
        width: 100%;

    }
    .procedure__container > .hiring__container h1{
        font-size: calc(var(--normal-font-size) + 2rem);
        font-weight: var(--font-weight-large);
    }

    .procedure__container > .hiring__container p{
        font-size: calc(var(--normal-font-size) + .3rem);
        font-weight: var(--font-weight-medium);
    
        }

    .procedure__container > .attenwebinar__container,
    .procedure__container > .application__container,
    .procedure__container > .interview__container,
    .procedure__container > .confirmation__container{

        /* border: 1px solid rgba(85, 83, 82, 0.2); */
        border-radius: 10px;
        display: flex;
        justify-content: space-evenly;
        align-items: start;
        flex-wrap: wrap;
        width: min(100%, 20rem);
        max-width: 20rem;
        height: calc(20rem * 1.5);
        background: var(--background-color-dark-blue); 
        -webkit-box-shadow: 8px 8px 9px -8px rgba(0, 0, 0, 1);
        -moz-box-shadow: 8px 8px 9px -8px rgba(0, 0, 0, 1);
        box-shadow: 8px 8px 9px -8px rgba(0, 0, 0, 1);
    }

    .procedure__container > .attenwebinar__container h1,
    .procedure__container > .application__container h1,
    .procedure__container > .interview__container h1,
    .procedure__container > .confirmation__container h1{
     
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        width: 100%;
        color: var(--background-color-dark-orange);
        padding-inline: .2rem;
        height: 5rem;
        
    }

    .procedure__container > .attenwebinar__container p,
    .procedure__container > .application__container p,
    .procedure__container > .interview__container p,
    .procedure__container > .confirmation__container p{
        /* border: 2px solid rgb(255, 0, 0); */
        background: var(--background-pure-white);
        color: var(--background-color-dark-blue);
        display: flex;
        text-align: center;
        align-items: center;
        height: 15rem;
        justify-content: center;
        padding-inline: 1rem;
        font-weight: var(--font-weight-medium);
        
    }


    .procedure__container > .attenwebinar__container div{
    
        height: 10rem;
        background-image: url(/img/webinarimage.jpeg);
        background-size: cover;
        background-repeat: no-repeat;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-position-y: -7rem;
        position: relative;
        width: 100%;

    }
    .procedure__container > .application__container div{
   
        height: 10rem;
        background-image: url(/img/signuptoday-img.jpeg);
        background-size: cover;
        background-repeat: no-repeat;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-position-y: -7rem;
        position: relative;
        width: 100%;

    }
    .procedure__container > .interview__container div{

        height: 10rem;
        background-image: url(/img/oneononeinveterview-img.jpeg);
        background-size: cover;
        background-repeat: no-repeat;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-position-y: -7rem;
        position: relative;
        width: 100%;

    }

    .procedure__container > .confirmation__container div{
 
        height: 10rem;
        background-image: url(/img/confirmation-img.jpeg);
        background-size: cover;
        background-repeat: no-repeat;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-position-y: -4rem;
        position: relative;
        width: 100%;

    }


    /*CSS for who we are STARTS here */

    .ourteam__container{
   
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 2rem;
        gap: 1rem;
    }
    .ourteam__introduction,
    .directors__container,
    .project__manager{
        
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        height: 100%;
        width: 100%;
        gap: 1rem;
    }
    
    .ourteam__introduction{    
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    
    }
    .ourteam__introduction h1{    
        
        color: var(--background-color-dark-blue);
        font-weight: var(--font-weight-medium);
    }
    .ourteam__introduction p{    
        color: var(--font-color-white);
        font-weight: var(--font-weight-medium);
    }
    .team__member{    
        position: relative;
        border-radius: 10px;
        width: 20rem;
        height: calc(20rem * 1.2);
        color: var(--background-color-dark-blue);
        background-color: var(--background-pure-white);
        z-index: 1;
        font-size: var(--normal-font-size) ;
        font-weight: var(--font-weight-normal);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        font-size: 1.3rem;
        font-weight: var(--font-weight-medium);
        -webkit-box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
        -moz-box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
        box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
      
      
    }
    .team__member:before{
        content: "";
        position: absolute;
        max-width: 20rem;
        width: 100%;
        height: 100%;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: url(/img/jobsider-logo-our-team-with-no-img.png) center center;
        background-size: 70%;
        background-position: center;
        background-repeat: no-repeat;
        opacity: .2;
    }
    
    .team__member img{
        width: 100%;
        max-width: 19rem;
        height: 100%;
        max-height: 15rem;
        opacity: .5;
    }
  /*CSS for SLIDER START HERE  */

    .slider__header{
        position: relative;
    }
    .slider__header h1{
        color: var(--background-color-dark-blue);
    }
    
    .slider__header p{
        font-size: calc(var(--normal-font-size) + .2rem);
        font-weight: var(--font-weight-medium);
        color: var(--background-color-dark-blue);
    }
    
    /* SLIDER SECTION */
    
    .slider__section{
        
        display: grid;
        grid-template-rows: repeat(auto-fit, 5rem);
 
    }
    .slider{ 

        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        max-width: 29rem;
        margin: auto;
        position: relative;
        justify-content: center;
        overflow: hidden; 
    }
    
    /* SLIDER LIST HERE */
    .slider__list{
  
        display: flex;
        width: max-content;
        /* overflow: hidden; */
    }

    

    .slider__list{
        position: relative;
        display: flex;    
        height:  28rem;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        width: max-content;
        overflow: hidden;
    }

    .slider__item{
        display: grid
;
        min-height: 0;
        align-content: center;
        justify-content: center;
        align-items: center;
        justify-items: center;
    }

    .slider__item img{
        object-fit: contain;
        width: 100%;
        height: 100%;
        grid-row: 1;
        grid-column: 1;
    }
    .slider__buttons{
        width: 100%;
        position: absolute;
        top: 40%;
        left: 0;
        display: flex;
        justify-content: space-between;
        height: 5rem;
        align-items: center;
        justify-items: center;
        align-self: center;    
    }
    .slider__buttons button{
        width: 4rem;
        height: 4rem;
        font-size: 2rem;
        font-weight: bold;
        color:var(--background-color-dark-orange);
        background: rgba(0, 4, 255, 0.3);
        border-radius: 50%;    
        border: none;
        font-family: var(--font-family);
        transition: .4s;
    }    
    .slider__buttons button:hover{
        width: 4rem;
        height: 4rem;
        font-size: 2rem;
        font-weight: bold;
        color:var(--font-color-white);
        background: rgba(246, 149, 66, 0.5);
        border-radius: 50%;
        cursor: pointer;    
        border: none;
        opacity: 1;
        font-family: var(--font-family);
    }    
    .slider__dots{
        position: absolute;
        bottom: 2rem;
        color: white;
        font-size: 1rem;
        list-style-type: disc;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        z-index: 1;   
        margin-bottom: 2rem;        
    }
    .slider__dots li{
        list-style: none;
        width: .5rem;
        height: .5rem;
        background-color: var(--background-color-dark-blue);
        margin:1rem;
        border-radius: .5rem;
        transition: 1s;
    }
    .slider__dots li.slider__active{
        background-color: var(--background-color-dark-orange);  
        width: 2rem;
    }    
    .seemore__offer{
        width: auto;
        background: var(--background-darker-white);
        height: 3rem;
        display: flex;
        justify-content: center;
        position: relative;
        
    }
    .seemore__offer button{
        width: 10rem;
        border-radius: 2rem;
        background-color: var(--background-color-dark-blue);
        font-family: var(--font-family);
        font-weight: var(--font-weight-large);
        color: var(--font-color-white);
        border: none;
        transition: .4s;
        font-size: 1rem;        
    }
    .seemore__offer button:hover{
        width: 10rem;
        border-radius: 2rem;
        background-color: var(--background-color-dark-orange);
        font-family: var(--font-family);
        font-weight: var(--font-weight-large);
        color: var(--background-color-dark-blue);
        border: none;        
    }

    /* RESUABLE CSS for FOOTER START HERE  */

     /* footer__container START HERE */

     .footercontent__container{
        /* border: 2px solid red; */
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
        justify-content: center;
        gap: 1.5rem
        
    }
    .footercontent__container > div{
       
        display: flex;
        align-items: start;
        flex-direction: column;
        gap: 1rem;
        font-weight: var(--font-weight-medium);
        transition: all 1s;
    }
    .footercontent__container > div:nth-child(4){
       
        display: flex;
        align-items: start;
        flex-direction: column;
        gap: 1rem;
        font-weight: var(--font-weight-medium);
        transition: all 1s;
    }

    .footercontent__container > div:nth-child(4) div:nth-child(2){
        display: flex;
        gap: 1rem;
       
        align-items: center;
        flex-direction: row;
        
    }

    .footercontent__container > div:nth-child(1) div:nth-child(2){
       line-height: 2rem;
       font-size: .9rem;
       text-align: start;
    }
    .footercontent__container > div:nth-child(1) div:nth-child(3){
        font-size: .9rem;
        text-align: start;
    } 
    .footercontent__container > div img{
        width: 12.5rem;

    }

    .footercontent__container > div:nth-child(2) div:nth-child(4){
        font-size: .9rem;
        text-align: start;

    } 

    .footercontent__container > div:nth-child(4) i{
        /* border: 2px solid yellow; */
        display: flex;
        flex-direction: column;
        font-weight: var(--font-weight-medium);
        font-size: calc(var(--normal-font-size) + 1rem);
    }
    .footercontent__container > div:nth-child(4) i:hover{
        cursor: pointer;

    }  

    .modal-content, .privacymodal-content, .data-content{
        background-color: var(--background-pure-white);
        font-family: var(--font-family);
        color: var(--background-color-dark-blue);
        line-height: 3rem;
        margin: 12% auto; /* 15% from the top and centered */
        padding: 2.5rem;
        border-radius: 10px;
        width: 90%; /* Could be more or less, depending on screen size */
        max-width: 1250px;
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
        position: relative;
        text-align: justify;
        
     
    }

} 







/* NAGIVATION FOR SMALLER DEVICES *//* NAGIVATION FOR SMALLER DEVICES *//* NAGIVATION FOR SMALLER DEVICES */
@media screen and (max-width: 340px) { 
    .headlines__container > .container,
    .subheadlines__container > .container {
       
        flex-wrap: nowrap;
        flex-direction: column;
        height: 100%;
        width: 100%;
 
    }
    
    .headlines__container > .container > .left__headlines{
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        height: 100%;
        max-width: 90%;
    }
    /* THIS AREA IS FOR RIGHT HEADLINES  */
    
    .headlines__container > .container > .right__headlines{
        display: flex;
        height: 100%;
        padding-block: 1rem;
        width: 100%;
        max-width: 34.8rem;
        justify-content: center;
        text-align: center;
        align-items: center;
        align-content: center;        
    }  
    
    .form__container{        
        display: flex;
        flex-direction: column-reverse;
        font-size: var(--normal-font-size);
        height: 100%;
        width: 100%;
        justify-content: center;
    }
    
    
    /* LEFT SIDE OF THE RIGHT HEADLINES (FORM CONTAINER) */
    
    .form__container > .left__side {
    
        flex-direction: auto;
        font-size: var(--normal-font-size);
    }

    .left__side i, 
    .left__side 
    .title{
        color: var(--background-color-dark-orange);
        font-size: calc(var(--normal-font-size) + .2rem);
        font-weight: var(--font-weight-medium);
        
    }

    .form__container .left__side .detail
    .text__one, 
    .text__two, 
    .text__three{

    color: var(--font-color-white);
    font-weight: var(--font-weight-medium);

    
    }
    
    .left__side a{
        text-align: none;
        color:var(--font-color-white);
        font-family: var(--font-family);
        font-weight: var(--font-weight-medium);
    }
    .left__side a:hover{
        color: var(--background-color-dark-orange);
    }
    
    
    /* RIGHT SIDE OF THE RIGHT HEADLINES */
    
    .form__container > .right__side{
        display: flex;
        flex-direction: column;
        font-size: var(--normal-font-size);
        height: 100%;
    }
    
    .form__container > .right__side .title__text{
        font-size: 2rem;
        font-weight: var(--font-weight-large);
        text-align: start;
        color: var(--background-color-dark-orange);
        padding-inline: 1rem;
        
    }
    
    .form__container > .right__side #contactForm{
        padding-block: 1rem;
        backdrop-filter: blur(20%);
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        gap: 1rem;
    }
    
    .form__container > .right__side #contactForm .input__box input{    
        border-radius: 5px;
        border-color: none;
        border: none;
        width: 95%;
        padding: .5rem;
        color: var(--background-color-dark-blue);
        font-family: var(--font-family);
        font-weight: var(--font-weight-large);
        font-size: 1rem;
        
        -webkit-box-shadow: -1px -5px 30px -9px rgba(66, 68, 90, 0.38);
        -moz-box-shadow: -1px -5px 30px -9px rgba(66, 68, 90, 0.38);
        box-shadow: -1px -5px 30px -9px rgba(66, 68, 90, 0.38);
    }
    
    .form__container .right__side .message__box textarea{
        height: 7rem;
        resize: none;
        width: 95%;
        /* border: none; */
        border: none;
        border-radius: 5px;
        background: var(--nav-background-color-pure-white);
        color: var(--background-color-dark-blue);
        padding-left: .5rem;
        padding-top: .2rem;
        font-family: var(--font-family);
        font-weight: var(--font-weight-large);
        font-size: 1rem;
        
        -webkit-box-shadow: -1px -5px 30px -9px rgba(66, 68, 90, 0.38);
        -moz-box-shadow: -1px -5px 30px -9px rgba(66, 68, 90, 0.38);
        box-shadow: -1px -5px 30px -9px rgba(66, 68, 90, 0.38);
   
    }
    
    .consent{
      
        display: flex;
        font-size: var(--normal-font-size);
        color: var(--font-color-white);
        justify-content: center;
        text-align: justify;
        align-items: start;
        width: 100%;
        padding-inline: 1rem;
        gap: .5rem;    
        
    }
    
    
    .right__side .send__button{
        padding: 0rem 1rem 0rem 1rem;
    
    }
    
    .right__side .send__button button{        
        padding: .5rem .5rem .5rem .5rem;
        border-radius: 2px;
        border: none;
        padding: .5rem;
        font-family: var(--font-family);
        font-weight: var(--font-weight-medium);
        color: var(--font-color-white);
        box-shadow:  var(--box-shadow-dark);
        background-color: var(--background-color-dark-orange);
        transition: .3s;
        box-shadow: 7px 7px 4px -6px rgba(0,0,0,1);
        display: flex;
        float: right;
    }
    .right__side .send__button button:hover {
        background-color: var(--background-color-lighter-blue); /* Change color on hover */
        box-shadow: 7px 7px 4px -2px rgba(0,0,0,1);
    }

    .right__side .send__button button:active {
        color: var(--background-color-dark-blue);
        box-shadow: inset 7px 7px 4px -6px rgba(0,0,0,1);
    }

    /* Disabled state for button-sendnow */
    button.button-sendnow:disabled {
        background-color: #ccc; /* Gray background for disabled state */
        color: #666; /* Dimmed text color */
        cursor: not-allowed; /* Show not-allowed cursor */
        box-shadow: none; /* Remove shadow for disabled state */
        transform: none; /* Remove hover effects */
    }

    /* Enabled state for button-sendnow (on hover) */
    button.button-sendnow:not(:disabled):hover {
        background-color: var(--background-color-lighter-blue); /* Change color on hover */
        transform: translateY(-2px); /* Add a hover effect */
        box-shadow: 7px 7px 4px -2px rgba(0, 0, 0, 1);
    }

    /* Active state for button-sendnow */
    button.button-sendnow:not(:disabled):active {
        background-color: var(--background-color-dark-blue); /* Darker background on click */
        color: var(--font-color-white); /* Ensure text is readable */
        box-shadow: inset 7px 7px 4px -6px rgba(0, 0, 0, 1);
        transform: translateY(0); /* Reset transform on click */
    }

    /* SUBHEADLINES START HERE */

    .vmv__container{    
       
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;   
        justify-content: center;
        align-items: start;
   
     }
     .vision__container,
     .mission__container,
     .values__container{ 
        
        display: flex;
        height: auto;
        text-align: center;
        align-content: space-between;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
         
         
     }    
    .vision__container  i,
    .mission__container  i,
    .values__container i{
        border: 2px solid green;
        font-size: 4rem;
        width: 100%;
        height: 100%;
    }
    .vision__container  h1,
    .mission__container  h1,
    .values__container  h1{
        
        text-align: center;
        align-items: start;
        font-size: 3rem;
        color: var(--background-color-dark-orange); 
    }      
    .vision__container  p,
    .mission__container  p,
    .values__container  p{
        line-height: 2rem;
        font-weight: var(--font-weight-medium);
        text-align: center;   
    } 


    /* CSS for whatweoffer START HERE  */
    .offer__container{ 
   
      
        display: flex;
        flex-wrap: wrap;
        height: auto;
        width: 100%;
        padding-block: 2rem;
        padding-inline: 2rem;
        text-align: center;
        align-items: center;
        gap: 2rem;
        justify-content: center;


    }

    .title__container{
  
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .title__container h1{
        color: var(--background-color-dark-blue);
    }
    .title__container p{
        color: var(--background-color-dark-blue);
        font-size: var(--normal-font-size);
        font-weight: var(--font-weight-medium);
    }

    .student__container,
    .business__container,
    .visit__container{      
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        
        border-radius: 5px ;
        height: 15rem;
        width: 15rem;
        align-content: baseline;
        line-height: 2rem;
        padding-inline: 1rem;
        text-align: start; 
        -webkit-box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
        -moz-box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
        box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);

    }

    .student__container h3,
    .business__container h3,
    .visit__container h3{      
        color:white;
        position: relative;
        top: 50%;
        transition: .5s ease-in-out;
    }

    
    .student__container p,
    .business__container p ,
    .visit__container p{      
        color:white;
        position: relative;
        top: 50%;
        transition: .5s ease-in-out;
        opacity: 0;
        font-weight: var(--font-weight-medium);
    }

    .student__container:hover h3,
    .business__container:hover h3,
    .visit__container:hover h3{      
        color:var(--background-color-dark-orange);
        position: relative;
        top: 0;
        font-weight: var(--font-weight-large);
        transition: .5s ease-in-out;
        font-size: var(--font-size-header1);
    }

    
    .student__container:hover p,
    .business__container:hover p ,
    .visit__container:hover p{      
        color:var(--font-color-white);
        position: relative;
        top: 0;
        transition: .5s ease-in-out;
        opacity: 1;
    }


    .student__container{
        background-image: url(/img/studentcontainerbackground.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        background-blend-mode:darken;
        
    }
    .business__container{
        background-image: url(/img/businesscontainerbackground.png);
        background-size:cover;
        background-repeat: no-repeat;
        
    }

    .visit__container{
        background-image: url(/img/visitcontainerbackground.png);
        background-size:cover;
        background-repeat: no-repeat;
    }

    /* WHO WE ARE SECTION START HERE */

    .aboutus__container{
        height: auto;
        display: flex;
        max-width: 1162px;
        padding-block: 0rem;
        flex-wrap: wrap;
        flex: auto;    
        justify-content: center;    
    }
    .left__whoweare img{
       
        width: 100%;  
        max-width: 36.3125rem;  
        height: auto;
        background-repeat: no-repeat;
        border-radius: 10px;
        opacity: 80%;

        -webkit-box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
        -moz-box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
        box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
    }
    .right__whoweare{        

        text-align: center;
        color: var(--background-color-dark-blue);

    }

    .right__whoweare :nth-child(3){        
        padding-top: 2rem;
        font-weight: var(--font-weight-medium);
    }
    .read__more{

        width: 100%;
        font-size: 1.2rem;
        color: var(--background-color-dark-blue);
        text-decoration: none;
    }
    

    /*CSS for procedure START HERE  */

    .procedure__container{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        padding: 1rem 1rem;
        gap: 2rem;
        justify-content: space-evenly;
        
    }

    .procedure__container > .hiring__container{

        color: var(--background-color-dark-blue);
        display: flex;
        justify-content: space-evenly;
        align-items: start;
        flex-wrap: wrap;
        width: 100%;

    }
    .procedure__container > .hiring__container h1{
        font-size: calc(var(--normal-font-size) + 2rem);
        font-weight: var(--font-weight-large);
    }

    .procedure__container > .hiring__container p{
        font-size: calc(var(--normal-font-size) + .3rem);
        font-weight: var(--font-weight-medium);
    
        }

    .procedure__container > .attenwebinar__container,
    .procedure__container > .application__container,
    .procedure__container > .interview__container,
    .procedure__container > .confirmation__container{

        /* border: 1px solid rgba(85, 83, 82, 0.2); */
        border-radius: 10px;
        display: flex;
        justify-content: space-evenly;
        align-items: start;
        flex-wrap: wrap;
        width: min(100%, 20rem);
        max-width: 20rem;
        height: calc(20rem * 1.5);
        background: var(--background-color-dark-blue); 
        -webkit-box-shadow: 8px 8px 9px -8px rgba(0, 0, 0, 1);
        -moz-box-shadow: 8px 8px 9px -8px rgba(0, 0, 0, 1);
        box-shadow: 8px 8px 9px -8px rgba(0, 0, 0, 1);
    }

    .procedure__container > .attenwebinar__container h1,
    .procedure__container > .application__container h1,
    .procedure__container > .interview__container h1{
     
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        width: 100%;
        color: var(--background-color-dark-orange);
        padding-inline: .2rem;
        min-height: 5rem;
        line-break: auto;
        flex-wrap: wrap;
        
    }
    .procedure__container > .confirmation__container h1{
     
        height: auto;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        width: 100%;
        color: var(--background-color-dark-orange);
        padding-inline: .2rem;
        min-height: 5rem;
        line-break:anywhere;
        flex-wrap: wrap;
        
    }

    .procedure__container > .attenwebinar__container p,
    .procedure__container > .application__container p,
    .procedure__container > .interview__container p,
    .procedure__container > .confirmation__container p{
        /* border: 2px solid rgb(255, 0, 0); */
        background: var(--background-pure-white);
        color: var(--background-color-dark-blue);
        display: flex;
        text-align: center;
        align-items: center;
        height: 15rem;
        justify-content: center;
        padding-inline: 1rem;
        font-weight: var(--font-weight-medium);
        flex-wrap: wrap;
        
    }


    .procedure__container > .attenwebinar__container div{
    
        height: 10rem;
        background-image: url(/img/webinarimage.jpeg);
        background-size: cover;
        background-repeat: no-repeat;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-position-y: -4.5rem;
        position: relative;
        width: 100%;

    }
    .procedure__container > .application__container div{
   
        height: 10rem;
        background-image: url(/img/signuptoday-img.jpeg);
        background-size: cover;
        background-repeat: no-repeat;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-position-y: -2rem;
        position: relative;
        width: 100%;

    }
    .procedure__container > .interview__container div{

        height: 10rem;
        background-image: url(/img/oneononeinveterview-img.jpeg);
        background-size: cover;
        background-repeat: no-repeat;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-position-y: -2rem;
        position: relative;
        width: 100%;

    }

    .procedure__container > .confirmation__container div{
 
        height: 10rem;
        background-image: url(/img/confirmation-img.jpeg);
        background-size: cover;
        background-repeat: no-repeat;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-position-y: -2rem;
        position: relative;
        width: 100%;

    }
    /*CSS for who we are STARTS here */

    .ourteam__container{
       
        display: flex;
        flex-wrap: wrap;
        width: auto;
        gap: 2rem;
        padding-block: 2rem;
    }
    .ourteam__introduction,
    .directors__container,
    .project__manager{
        
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        height: 100%;
        width: 100%;
        gap: 1rem;
    }
    
    .ourteam__introduction{    
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    
    }
    .ourteam__introduction h1{    
        
        color: var(--background-color-dark-blue);
        font-weight: var(--font-weight-medium);
    }
    .ourteam__introduction p{    
        color: var(--font-color-white);
        font-weight: var(--font-weight-medium);
    }
    .team__member{    
        position: relative;
        border-radius: 10px;
        width: 100%;
        height: calc(20rem * 1.2);
        color: var(--background-color-dark-blue);
        background-color: var(--background-pure-white);
        z-index: 1;
        font-size: var(--normal-font-size) ;
        font-weight: var(--font-weight-normal);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        font-size: 1.3rem;
        font-weight: var(--font-weight-medium);
        -webkit-box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
        -moz-box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
        box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
      
      
    }
    .team__member:before{
        content: "";
        position: absolute;
        max-width: 20rem;
        width: 100%;
        height: 100%;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: url(/img/jobsider-logo-our-team-with-no-img.png) center center;
        background-size: 70%;
        background-position: center;
        background-repeat: no-repeat;
        opacity: .2;
    }
    
    .team__member img{
        width: 100%;
        max-width: 19rem;
        height: 100%;
        max-height: 15rem;
        opacity: .5;
    }
  /*CSS for SLIDER START HERE  */

    .slider__header{
        position: relative;
    }
    .slider__header h1{
        color: var(--background-color-dark-blue);
    }
    
    .slider__header p{
        font-size: calc(var(--normal-font-size) + .2rem);
        font-weight: var(--font-weight-medium);
        color: var(--background-color-dark-blue);
    }
    
    /* SLIDER SECTION */
    
    .slider__section{
        
        display: grid;
        grid-template-rows: repeat(auto-fit, 5rem);
 
    }
    .slider{ 

        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        max-width: 29rem;
        margin: auto;
        position: relative;
        justify-content: center;
        overflow: hidden; 
    }
    
    /* SLIDER LIST HERE */
    .slider__list{
        border: 2px solid orange;
        display: flex;
        width: max-content;
        /* overflow: hidden; */
    }

    

    .slider__list{
        position: relative;
        display: flex;    
        height:  28rem;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        width: max-content;
        overflow: hidden;
    }
    .slider__item img{
        max-width: inherit;
        max-height: 28rem;   
    }
    .slider__buttons{
        width: 100%;
        position: absolute;
        top: 40%;
        left: 0;
        display: flex;
        justify-content: space-between;
        height: 5rem;
        align-items: center;
        justify-items: center;
        align-self: center;    
    }
    .slider__buttons button{
        width: 4rem;
        height: 4rem;
        font-size: 2rem;
        font-weight: bold;
        color:var(--background-color-dark-orange);
        background: rgba(0, 4, 255, 0.3);
        border-radius: 50%;    
        border: none;
        font-family: var(--font-family);
        transition: .4s;
    }    
    .slider__buttons button:hover{
        width: 4rem;
        height: 4rem;
        font-size: 2rem;
        font-weight: bold;
        color:var(--font-color-white);
        background: rgba(246, 149, 66, 0.5);
        border-radius: 50%;
        cursor: pointer;    
        border: none;
        opacity: 1;
        font-family: var(--font-family);
    }    
    .slider__dots{
        position: absolute;
        bottom: 2rem;
        color: white;
        font-size: 1rem;
        list-style-type: disc;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        z-index: 1;   
        margin-bottom: 2rem;        
    }
    .slider__dots li{
        list-style: none;
        width: .5rem;
        height: .5rem;
        background-color: var(--background-color-dark-blue);
        margin:1rem;
        border-radius: .5rem;
        transition: 1s;
    }
    .slider__dots li.slider__active{
        background-color: var(--background-color-dark-orange);  
        width: 2rem;
    }    
    .seemore__offer{
        width: auto;
        background: var(--background-darker-white);
        height: 3rem;
        display: flex;
        justify-content: center;
        position: relative;
        top:.5rem; 
    }
    .seemore__offer button{
        width: 10rem;
        border-radius: 2rem;
        background-color: var(--background-color-dark-blue);
        font-family: var(--font-family);
        font-weight: var(--font-weight-large);
        color: var(--font-color-white);
        border: none;
        transition: .4s;
        font-size: 1rem;        
    }
    .seemore__offer button:hover{
        width: 10rem;
        border-radius: 2rem;
        background-color: var(--background-color-dark-orange);
        font-family: var(--font-family);
        font-weight: var(--font-weight-large);
        color: var(--background-color-dark-blue);
        border: none;        
    }

    

    /* RESUABLE CSS for FOOTER START HERE  */

     /* footer__container START HERE */

     .footercontent__container{
        /* border: 2px solid red; */
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
        justify-content: center;
        gap: 1.5rem
        
    }
    .footercontent__container > div{
       
        display: flex;
        align-items: start;
        flex-direction: column;
        gap: 1rem;
        font-weight: var(--font-weight-medium);
        transition: all 1s;
    }
    .footercontent__container > div:nth-child(4){
       
        display: flex;
        align-items: start;
        flex-direction: column;
        gap: 1rem;
        font-weight: var(--font-weight-medium);
        transition: all 1s;
    }

    .footercontent__container > div:nth-child(4) div:nth-child(2){
        display: flex;
        gap: 1rem;
       
        align-items: center;
        flex-direction: row;
        
    }

    .footercontent__container > div:nth-child(1) div:nth-child(2){
       line-height: 2rem;
       font-size: .9rem;
       text-align: start;
    }
    .footercontent__container > div:nth-child(1) div:nth-child(3){
        font-size: .9rem;
        text-align: start;
    } 
    .footercontent__container > div img{
        width: 12.5rem;

    }
    .footercontent__container > div:nth-child(2) div:nth-child(4){
        font-size: .9rem;
        text-align: start;

    } 

    .footercontent__container > div:nth-child(4) i{
        /* border: 2px solid yellow; */
        display: flex;
        flex-direction: column;
        font-weight: var(--font-weight-medium);
        font-size: calc(var(--normal-font-size) + 1rem);
    }
    .footercontent__container > div:nth-child(4) i:hover{
        cursor: pointer;

    }  

    
}













/* NAGIVATION FOR LARGER DEVICES *//* NAGIVATION FOR LARGER DEVICES *//* NAGIVATION FOR LARGER DEVICES */
@media screen and (min-width: 1162px) {

    .headlines__container > .container,
    .subheadlines__container > .container {

        flex-wrap: nowrap;
        flex-direction: row;
 
    }
    
    .headlines__container > .container > .left__headlines{
        padding: 4rem;
        flex-wrap: nowrap;
        align-items: center;
        width: 100%;
        height: 100%;
    }
    /* THIS AREA IS FOR RIGHT HEADLINES  */
    
    .headlines__container > .container > .right__headlines{
        display: flex;
        height: 100%;
        padding-block: 1rem;
        width: 100%;
        justify-content: center;
        text-align: center;
        align-items: center;
        align-content: center;        
    }  
    
    .form__container{        
        display: flex;
        flex-direction: column-reverse;
        font-size: var(--normal-font-size);
        height: 100%;
        width: 100%;
        justify-content: center;
    }
    
    
    /* LEFT SIDE OF THE RIGHT HEADLINES (FORM CONTAINER) */
    
    .form__container > .left__side {
    
        flex-direction: auto;
        font-size: var(--normal-font-size);
    }

    .left__side i, 
    .left__side 
    .title{
        color: var(--background-color-dark-orange);
        font-size: calc(var(--normal-font-size) + .2rem);
        font-weight: var(--font-weight-medium);
        
    }

    .form__container .left__side .detail
    .text__one, 
    .text__two, 
    .text__three{

    color: var(--font-color-white);
    font-weight: var(--font-weight-medium);

    
    }
    
    .left__side a{
        text-align: none;
        color:var(--font-color-white);
        font-family: var(--font-family);
        font-weight: var(--font-weight-medium);
    }
    .left__side a:hover{
        color: var(--background-color-dark-orange);
    }
    
    
    /* RIGHT SIDE OF THE RIGHT HEADLINES */
    
    .form__container > .right__side{
        display: flex;
        flex-direction: column;
        font-size: var(--normal-font-size);
        height: 100%;
    }
    
    .form__container > .right__side .title__text{
        font-size: 2rem;
        font-weight: var(--font-weight-large);
        text-align: start;
        color: var(--background-color-dark-orange);
        padding-inline: 1rem;
        
    }
    
    .form__container > .right__side #contactForm{
        padding-block: 1rem;
        backdrop-filter: blur(20%);
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        gap: 1rem;
    }
    
    .form__container > .right__side #contactForm .input__box input{    
        border-radius: 5px;
        border-color: none;
        border: none;
        width: 95%;
        padding: .5rem;
        color: var(--background-color-dark-blue);
        font-family: var(--font-family);
        font-weight: var(--font-weight-large);
        font-size: 1rem;
        
        -webkit-box-shadow: -1px -5px 30px -9px rgba(66, 68, 90, 0.38);
        -moz-box-shadow: -1px -5px 30px -9px rgba(66, 68, 90, 0.38);
        box-shadow: -1px -5px 30px -9px rgba(66, 68, 90, 0.38);
    }
    
    .form__container .right__side .message__box textarea{
        height: 7rem;
        resize: none;
        width: 95%;
        /* border: none; */
        border: none;
        border-radius: 5px;
        background: var(--nav-background-color-pure-white);
        color: var(--background-color-dark-blue);
        padding-left: .5rem;
        padding-top: .2rem;
        font-family: var(--font-family);
        font-weight: var(--font-weight-large);
        font-size: 1rem;
        
        -webkit-box-shadow: -1px -5px 30px -9px rgba(66, 68, 90, 0.38);
        -moz-box-shadow: -1px -5px 30px -9px rgba(66, 68, 90, 0.38);
        box-shadow: -1px -5px 30px -9px rgba(66, 68, 90, 0.38);
   
    }
    
    .consent{
      
        display: flex;
        font-size: var(--normal-font-size);
        color: var(--font-color-white);
        justify-content: center;
        text-align: justify;
        align-items: start;
        width: 100%;
        padding-inline: 1rem;
        gap: .5rem;    
        
    }
    
    
    .right__side .send__button{
        padding: 0rem 1rem 0rem 1rem;
        
    
    }
    
    .right__side .send__button button{        
        padding: .5rem .5rem .5rem .5rem;
        border-radius: 2px;
        border: none;
        padding: .5rem;
        font-family: var(--font-family);
        font-weight: var(--font-weight-medium);
        color: var(--font-color-white);
        box-shadow:  var(--box-shadow-dark);
        background-color: var(--background-color-dark-orange);
        transition: .3s;
        box-shadow: 7px 7px 4px -6px rgba(0,0,0,1);
        display: flex;
        float: right;
    }
    .right__side .send__button button:hover {
        background-color: var(--background-color-lighter-blue); /* Change color on hover */
        box-shadow: 7px 7px 4px -2px rgba(0,0,0,1);
    }

    .right__side .send__button button:active {
        color: var(--background-color-dark-blue);
        box-shadow: inset 7px 7px 4px -6px rgba(0,0,0,1);
    }

    /* Disabled state for button-sendnow */
    button.button-sendnow:disabled {
        background-color: #ccc; /* Gray background for disabled state */
        color: #666; /* Dimmed text color */
        cursor: not-allowed; /* Show not-allowed cursor */
        box-shadow: none; /* Remove shadow for disabled state */
        transform: none; /* Remove hover effects */
    }

    /* Enabled state for button-sendnow (on hover) */
    button.button-sendnow:not(:disabled):hover {
        background-color: var(--background-color-lighter-blue); /* Change color on hover */
        transform: translateY(-2px); /* Add a hover effect */
        box-shadow: 7px 7px 4px -2px rgba(0, 0, 0, 1);
    }

    /* Active state for button-sendnow */
    button.button-sendnow:not(:disabled):active {
        background-color: var(--background-color-dark-blue); /* Darker background on click */
        color: var(--font-color-white); /* Ensure text is readable */
        box-shadow: inset 7px 7px 4px -6px rgba(0, 0, 0, 1);
        transform: translateY(0); /* Reset transform on click */
    }

    /* SUBHEADLINES START HERE */

    .vmv__container{    
        
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 1rem;   
        justify-content: center;
        align-items: start;
   
     }
     .vision__container,
     .mission__container,
     .values__container{ 
        
        display: flex;
        height: auto;
        text-align: center;
        align-content: space-between;
        justify-content: center;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
         
         
     }     
    .vision__container  i,
    .mission__container  i,
    .values__container i{
        text-align: start;
        font-size: 4rem;
        color: var(--font-color-white); 
        font-weight: var(--font-weight-normal);
    }
    .vision__container  h1,
    .mission__container  h1,
    .values__container  h1{
        text-align: start;
        font-size: 3rem;
        color: var(--background-color-dark-orange); 
    }      
    .vision__container  p,
    .mission__container  p,
    .values__container  p{
        line-height: 2rem;
        font-weight: var(--font-weight-medium);
        text-align: start;   
    } 


    /* CSS for whatweoffer START HERE  */
    .offer__container{ 

      
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        height: 100%;
        width: 100%;
        
        padding-block: 5rem;
        padding-inline: 2rem;
        text-align: center;
        align-items: center;
        gap: 2rem;


    }

    .title__container{
  
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        width: 15rem;
    }
    .title__container h1{
        color: var(--background-color-dark-blue);
    }
    .title__container p{
        color: var(--background-color-dark-blue);
        font-size: var(--normal-font-size);
        font-weight: var(--font-weight-medium);
    }

    .student__container,
    .business__container,
    .visit__container{      
        display: flex;
        flex-direction: column;
        border-radius: 5px ;
        height: 15rem;
        width: 15rem;
        align-content: baseline;
        line-height: 2rem;
        padding-inline: 1rem;
        text-align: start; 
        -webkit-box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
        -moz-box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
        box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);

    }

    .student__container h3,
    .business__container h3,
    .visit__container h3{      
        color:white;
        position: relative;
        top: 50%;
        transition: .5s ease-in-out;
    }

    
    .student__container p,
    .business__container p ,
    .visit__container p{      
        color:white;
        position: relative;
        top: 50%;
        transition: .5s ease-in-out;
        opacity: 0;
        font-weight: var(--font-weight-medium);
    }

    .student__container:hover h3,
    .business__container:hover h3,
    .visit__container:hover h3{      
        color:var(--background-color-dark-orange);
        position: relative;
        top: 0;
        font-weight: var(--font-weight-large);
        transition: .5s ease-in-out;
        font-size: var(--font-size-header1);
    }

    
    .student__container:hover p,
    .business__container:hover p ,
    .visit__container:hover p{      
        color:var(--font-color-white);
        position: relative;
        top: 0;
        transition: .5s ease-in-out;
        opacity: 1;
    }


    .student__container{
        background-image: url(/img/studentcontainerbackground.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        background-blend-mode:darken;
        
    }
    .business__container{
        background-image: url(/img/businesscontainerbackground.png);
        background-size:cover;
        background-repeat: no-repeat;
        
    }

    .visit__container{
        background-image: url(/img/visitcontainerbackground.png);
        background-size:cover;
        background-repeat: no-repeat;
    }

    /* WHO WE ARE SECTION START HERE */

    .aboutus__container{
        height: auto;
   
        display: flex;
        max-width: 1162px;
        padding-block: 2rem;
        flex-wrap: nowrap;
        justify-content: center; 
        flex-direction: row;  
     
    }
    .left__whoweare img{
    
        width: 36.3125rem;  
        height: 100%;
        background-repeat: no-repeat;
        border-radius: 10px;
        opacity: 80%;

        -webkit-box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
        -moz-box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
        box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
    }
    .right__whoweare{        
 
        width: 100%;  
        display: flex;
        flex-direction: column;
        text-align: start;
        color: var(--background-color-dark-blue);
        height: auto;
        flex-wrap: wrap;
        line-height: 1.7em;
        
    }
    .right__whoweare :nth-child(3){        
        padding-top: 2rem;
        font-weight: var(--font-weight-medium);
       
    }
    .read__more{

        width: 100%;
        font-size: 1.2rem;
        color: var(--background-color-dark-blue);
        text-decoration: none;
    }
    

    /*CSS for procedure START HERE  */

    .procedure__container{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        padding-block: 5rem;
        flex-direction: auto;
        gap: 2rem;
        justify-content: space-evenly;
        
    }

    .procedure__container > .hiring__container{

        color: var(--background-color-dark-blue);
        display: flex;
        justify-content: space-evenly;
        align-items: start;
        flex-wrap: wrap;
        width: 20rem;
        height: calc(20rem * 1.5);
    }
    .procedure__container > .hiring__container h1{
        font-size: calc(var(--normal-font-size) + 2rem);
        font-weight: var(--font-weight-large);
    }

    .procedure__container > .hiring__container p{
        font-size: calc(var(--normal-font-size) + .3rem);
        font-weight: var(--font-weight-medium);
    
        }

    .procedure__container > .attenwebinar__container,
    .procedure__container > .application__container,
    .procedure__container > .interview__container,
    .procedure__container > .confirmation__container{

        /* border: 1px solid rgba(85, 83, 82, 0.2); */
        border-radius: 10px;
        display: flex;
        justify-content: space-evenly;
        align-items: start;
        flex-wrap: wrap;
        width: min(100%, 20rem);
        max-width: 20rem;
        height: calc(20rem * 1.5);
        background: var(--background-color-dark-blue); 
        -webkit-box-shadow: 8px 8px 9px -8px rgba(0, 0, 0, 1);
        -moz-box-shadow: 8px 8px 9px -8px rgba(0, 0, 0, 1);
        box-shadow: 8px 8px 9px -8px rgba(0, 0, 0, 1);
    }

    .procedure__container > .attenwebinar__container h1,
    .procedure__container > .application__container h1,
    .procedure__container > .interview__container h1,
    .procedure__container > .confirmation__container h1{
     
        display: flex;
        height: 5rem;
        text-align: center;
        justify-content: center;
        align-items: center;
        width: 100%;
        color: var(--background-color-dark-orange);
        padding-inline: .2rem;
        
    }

    .procedure__container > .attenwebinar__container p,
    .procedure__container > .application__container p,
    .procedure__container > .interview__container p,
    .procedure__container > .confirmation__container p{
        /* border: 2px solid rgb(255, 0, 0); */
        background: var(--background-pure-white);
        color: var(--background-color-dark-blue);
        display: flex;
        height: 15rem;
        text-align: center;
        justify-content: center;
        align-items: center;
        font-size: calc(var(--normal-font-size) + .3rem);
        align-items: center;
        padding-inline: 1rem;
        font-weight: var(--font-weight-medium);
        
    }


    .procedure__container > .attenwebinar__container div{
        /* border: 2px solid red; */
        width: inherit;
        height: 10rem;
        background-image: url(/img/webinarimage.jpeg);
        background-size:cover;
        background-repeat: no-repeat;
        background-position-y: -7rem;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;

    }
    .procedure__container > .application__container div{
        /* border: 2px solid red; */
        width: inherit;
        height: 10rem;
        background-image: url(/img/signuptoday-img.jpeg);
        background-size:cover;
        background-repeat: no-repeat;
        background-position-y: -8rem;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;

    }
    .procedure__container > .interview__container div{
        /* border: 2px solid red; */
        width: inherit;
        height: 10rem;
        background-image: url(/img/oneononeinveterview-img.jpeg);
        background-size:cover;
        background-repeat: no-repeat;
        background-position-y: -6.5rem;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;

    }

    .procedure__container > .confirmation__container div{
        /* border: 2px solid red; */
        width: inherit;
        height: 10rem;
        background-image: url(/img/confirmation-img.jpeg);
        background-size:cover;
        background-repeat: no-repeat;
        background-position-y: -4rem;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;

    }


    /*CSS for who we are STARTS here */

    .ourteam__container{
   
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 2rem;
        gap: 1rem;
    }
    .ourteam__introduction,
    .directors__container,
    .project__manager{
        
        display: flex;
        justify-content: space-evenly;
        height: 100%;
        width: 100%;
        gap: 1rem;
    }
    
    .ourteam__introduction{    
        flex-direction: column;
    
    }
    .ourteam__introduction h1{    
        color: var(--background-color-dark-blue);
        font-size: 3rem;
        font-weight: var(--font-weight-medium);
    }
    .ourteam__introduction p{    
        color: var(--font-color-white);
        font-size: 1.3rem;
        font-weight: var(--font-weight-medium);
    }
    .team__member{    
        position: relative;
        border-radius: 10px;
        width: 20rem;
        height: calc(20rem * 1.2);
        color: var(--background-color-dark-blue);
        background-color: var(--background-pure-white);
        z-index: 1;
        font-size: var(--normal-font-size) ;
        font-weight: var(--font-weight-normal);
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        font-size: 1.3rem;
        font-weight: var(--font-weight-medium);
        -webkit-box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
        -moz-box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
        box-shadow: 0px 0px 20px -12px rgba(12, 12, 12, 1);
      
    }
    .team__member:before{
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: url(/img/jobsider-logo-our-team-with-no-img.png) center center;
        background-size: 70%;
        background-position: center;
        background-repeat: no-repeat;
        opacity: .2;
    }    
    .team__member img{
        width: 19rem;
        height: 15rem;
        opacity: .5;
    } 




  /*CSS for SLIDER START HERE  */
    .slider__section{
        
        display: grid;
        grid-template-rows: repeat(auto-fit, 5rem);
    }

    .slider__header{
        text-align: center;
        width: 100%;
        height: 100%;
        position: relative;
    }
    .slider__header h1{
       color: var(--background-color-dark-blue);
    }
    
    .slider__header p{
        font-size: calc(var(--normal-font-size) + .2rem);
        font-weight: var(--font-weight-medium);
        color: var(--background-color-dark-blue);
    }
    
    /* SLIDER SECTION */
    

    .slider{ 
    
        padding-block: 1rem;
        display: flex;
        flex-direction: column;
        height: auto;
        width: 28rem;
        margin: auto;
        position: relative;
        justify-content: center;
        overflow: hidden;   
    }    
    /* SLIDER LIST HERE */
    .slider__list{
        position: relative;
        display: flex;    
        height:  28rem;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        width: max-content;
        overflow: hidden;
    }
    .slider__item{
        max-width: 100%;
        max-height: auto;   
    }

    .slider__item img{
        max-width: inherit;
        max-height: 28rem;   
    }
    .slider__buttons{
        width: 100%;
        position: absolute;
        top: 40%;
        left: 0;
        display: flex;
        justify-content: space-between;
        height: 5rem;
        align-items: center;
        justify-items: center;
        align-self: center;    
    }
    .slider__buttons button{
        width: 4rem;
        height: 4rem;
        font-size: 2rem;
        font-weight: bold;
        color:var(--background-color-dark-orange);
        background: rgba(0, 4, 255, 0.3);
        border-radius: 50%;    
        border: none;
        font-family: var(--font-family);
        transition: .4s;
    }    
    .slider__buttons button:hover{
        width: 4rem;
        height: 4rem;
        font-size: 2rem;
        font-weight: bold;
        color:var(--font-color-white);
        background: rgba(246, 149, 66, 0.5);
        border-radius: 50%;
        cursor: pointer;    
        border: none;
        opacity: 1;
        font-family: var(--font-family);
    }    
    .slider__dots{
        position: absolute;
        bottom: 2rem;
        color: white;
        font-size: 1rem;
        list-style-type: disc;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        z-index: 1;   
        margin-bottom: 2rem;        
    }
    .slider__dots li{
        list-style: none;
        width: .5rem;
        height: .5rem;
        background-color: var(--background-color-dark-blue);
        margin:1rem;
        border-radius: .5rem;
        transition: 1s;
    }
    .slider__dots li.slider__active{
        background-color: var(--background-color-dark-orange);  
        width: 2rem;
    }    
    .seemore__offer{
        width: auto;
        background: var(--background-darker-white);
        height: 3rem;
        display: flex;
        justify-content: center;
        position: relative;
        top:.5rem; 
    }
    .seemore__offer button{
        width: 10rem;
        border-radius: 2rem;
        background-color: var(--background-color-dark-blue);
        font-family: var(--font-family);
        font-weight: var(--font-weight-large);
        color: var(--font-color-white);
        border: none;
        transition: .4s;
        font-size: 1rem;        
    }
    .seemore__offer button:hover{
        width: 10rem;
        border-radius: 2rem;
        background-color: var(--background-color-dark-orange);
        font-family: var(--font-family);
        font-weight: var(--font-weight-large);
        color: var(--background-color-dark-blue);
        border: none;        
    }

     /* RESUABLE CSS for FOOTER START HERE  */

     /* footer__container START HERE */

     .footercontent__container{
        /* border: 2px solid red; */
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
        justify-content: center;
        gap: 1.5rem
        
    }
    .footercontent__container > div{
        display: flex;
        align-items: start;
        flex-direction: column;
        gap: 1rem;
        font-weight: var(--font-weight-medium);
        transition: all 1s;
    }

    .footercontent__container > div:nth-child(4){
        display: flex;
        align-items: start;
        flex-direction: column;
        gap: 1rem;
        font-weight: var(--font-weight-medium);
        transition: all 1s;
    }

    .footercontent__container > div:nth-child(4) div:nth-child(2){
        display: flex;
        gap: 1rem;
        align-items: center;
        flex-direction: row;
        
    }

    .footercontent__container > div:nth-child(1) div:nth-child(2){
       line-height: 2rem;
       font-size: .9rem;
       text-align: start;
    }
    .footercontent__container > div:nth-child(1) div:nth-child(3){
        font-size: .9rem;
        text-align: start;
    } 

     .footercontent__container > div:nth-child(1) div:nth-child(3){
         font-size: .9rem;
         text-align: start;
     } 

     
    .footercontent__container > div img{
        width: 12.5rem;

    }

    .footercontent__container > div:nth-child(2) div:nth-child(4){
        font-size: .9rem;
        text-align: start;

    } 


    .footercontent__container > div:nth-child(4) i{
        /* border: 2px solid yellow; */
        display: flex;
        flex-direction: column;
        font-weight: var(--font-weight-medium);
        font-size: calc(var(--normal-font-size) + 1rem);
    }
    .footercontent__container > div:nth-child(4) i:hover{
        cursor: pointer;

    } 
    
}