/*===========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: 500;
    --font-weight-large: 700;
    --font-style: normal;
    --body-background-color-lightwhite: #fefefe;
    --font-color-white: #fffF;
    --font-color-black: black;
    
        

    /* BACKGROUND */
    
    --nav-text-shadow-on-hover: text-shadow: 2px 2px 4px #000000;
    --background-image-free-assessment: url(/img/main-bg-image.jpg);
    --background-color-dark-orange: #f69542;
    --background-color-dark-blue: #13558d;  
    --background-color-lighter-dark-blue: #0c4576;  
    --nav-background-color-pure-white: #fff;
    --nav-background-hover-color: #f5f5f5;


        /*===========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;
}



/*=============== 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);

    
}

html{    
    display: flex;
    justify-content: center;  
    background-color: white;
}


/*======================NAVIGATION CSS START HERE====================*/

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
    max-width: 1162px;
    margin-inline: auto;
  }

.header{
    
    position: fixed;
    z-index: var(--z-fixed);
    top: 0; 
    left: 0;
    width: 100%;
    background-color:white;
    height: calc(var(--header-height) + 4rem);
    transition: top 0.5s ease; /* Add this line */    
    align-items: center;
    align-content: center;
    text-align: center;
    

    -webkit-box-shadow: 0px 2px 2px 0px rgba(66, 68, 90, 0.23);
    -moz-box-shadow: 0px 2px 2px 0px rgba(66, 68, 90, 0.23);
    box-shadow: 0px 2px 2px 0px rgba(66, 68, 90, 0.23);
   
}
/*============================NAV============================ */
nav{
    height: var(--header-height);
    background-color: white;
    

}


.company__logo,
.nav__burger, 
.nav__close {
  color:var(--background-color-lighter-dark-blue);
}

.navigation__data{
    
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;

}

.company__logo{
    display: inline-flex;
    align-items: center;
    column-gap: .25rem;
    font-weight: var(--font-semi-bold);
    -webkit-tap-highlight-color: transparent;
}

.company__logo i{
    font-weight: initial;
    font-size: 1.25rem;
}

.nav__toggle{
    position: relative;
    width: 32px;
    height: 32px;
 
}

.nav__burger,
.nav__close{
    position: absolute;
    width: max-content;
    height:max-content;
    margin: auto;
    inset: 0;
    cursor: pointer;
    font-size: 1.25rem;
    transition: opacity .1s, transform .4s;
}

.nav__close {
    opacity: 0;
}

/* NAGIVATION FOR MOBILE DEVICES */

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

    .nav__menu.show {
        display: block;        
    }
    .nav__menu{
        
        position: absolute;
        left: 0;
        top: 4rem;
        width: 100%;
        overflow-y: auto;
        height: calc(100vh - 3.25rem);
        max-height: calc(100vh - 4rem); /* Ensure it doesn't exceed the viewport height */
        overflow: auto;
        pointer-events: none;
        opacity: 0;     
        transition: top .4s, opacity .3s;
    }
    .nav__menu.show {
        pointer-events: initial;
        opacity: 1;
    }
    .nav__menu::-webkit-scrollbar{
        width: 8PX;
    }
    .nav__list{
        
        align-items: center;
        padding-top: 0rem;
        border-bottom: 2px solid rgba(66, 68, 90, 0.23);
    }
    .nav__menu::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.3); /* Scrollbar thumb color */
        border-radius: 4px; /* Rounded corners */
    }
    .nav__menu::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.5); /* Darker color on hover */
    }
    .nav__menu::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0.1); /* Scrollbar track color */
    }

} 


/* <<<<<<<<<<<<END HERE>>>>>>>>>>>>> */

.nav__link{    
    border: 2px solid white;
    color: var(--font-color-black);
    background:var(--nav-background-color-pure-white);
    font-size: var(--normal-font-size);
    font-weight: var(--font-weight-medium);
    padding: 1.20rem 1.20rem;
    gap: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    transition: background-color .3s;
    
}

.nav__link:hover,
.nav__link.active{  
    font-weight: 800;
    transition: .2s;
    color: var(--background-color-dark-orange);
    -webkit-tap-highlight-color: transparent;
}
/* SHOW MENU */
.show-menu{
    opacity: 1;
    top: calc(var(--header-height) + 3.9rem);
    pointer-events: initial;
    height: auto;
    
}

/* SHOW ICON */

.show-icon .nav__burger{
    opacity: 0;
    transform: rotate(90deg);
}

.show-icon .nav__close{
    opacity: 1;
    transform: rotate(90deg);
    font-size: 1.25rem;
} 

/* DROP DROWN */

.dropdown__item{
    cursor: pointer;
    background: var(--nav-background-color-pure-white);
    
   
}

.dropdown__item.active .nav__link,
.dropdown__item:hover .nav__link {
    color: var(--background-color-dark-orange); /* Same color as on hover */
    background-color: transparent; /* Same background as hover */
    font-weight: var(--font-weight-large); /* Same font weight as hover */
    transition: .2s; /* Add transition for smoothness */
}


.dropdown__item.active .nav__link,
.dropdown__item:hover .nav__link {
    color: var(--background-color-dark-orange); /* Same color as on hover */
    background-color: transparent; /* Same background as hover */
    font-weight: var(--font-weight-large); /* Same font weight as hover */
    transition: .2s; /* Add transition for smoothness */
}

.dropdown__arrow{
    font-size: 1.25rem;
    font-weight: initial;
    transition: transform .4s;
}
.dropdown__link{
    background-color: white;
    color: var(--color-black);
    padding: 1.25rem 1.25rem 1.25rem 4.5rem;
    width: 100%;
    display: flex;
    align-content: center;
    align-items: center;
    column-gap: .5rem;
    font-weight: var(--font-weight-medium);
    transition: background-color .3s;
}
.dropdown__sublink{ 
    color: var(--color-white);
    padding: 1.25rem 1.25rem 1.25rem 8.5rem;
    width: 100%;
    display: flex;
    align-content: center;
    align-items: center;
    column-gap: .5rem;
    font-weight: var(--font-semi-bold);
    transition: background-color .3s;
    border: 1px solid var(--color-black);
}
.dropdown__link i,
.dropdown__sublink i{
    font-size: 1.25rem;
    font-weight: initial;   
}

.dropdown__link:hover,
.dropdown__sublink:hover{  
 
    color:var(--background-color-dark-orange);
    background-color: var(--nav-background-hover-color);
    font-weight: 800;
    transition: .2s;
}
.dropdown__menu,
.dropdown__submenu{
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease-out;
}
/* SHOWING DROP DOWN MENU */
.dropdown__item:hover .dropdown__menu,
.dropdown__subitem:hover > .dropdown__submenu{
    max-height: 1000px;
    transition: max-height .2s ease-in; 
    
}
.dropdown__item:hover .dropdown__arrow{
    rotate: 180deg;
    transition: .2s;    
}
/* SHOWING DROP DOWN SUB MENU*/

.dropdown__add{
    margin-left: auto;
}

.dropdown__sublink{

    top: 0;
    position: relative;
   
}

/* NEW LINES BREAK */

/* FOR SMALL DEVICES */

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

    
    .container{
        margin-inline: .5rem;
    }
    .nav__link{
        padding-inline: 1rem;
    }
}

@media screen and (min-width: 1162px) {
    .container {
        max-width: 1162px; /* Adjust as needed */
        margin: 0 auto; /* Centers the container */
        padding-inline: 0rem; /* Add padding for spacing */
        
    }

    .nav {
   
        height: calc(var(--header-height) + 2rem);
        display: flex;
        justify-content: space-between;
    }

    .nav__toggle {
        display: none;
    }
    
    .nav__list {
        height: 100%;
        display: flex;
        column-gap: 0rem;
        justify-content: center;
        text-align: center;
        align-content: center;
    }

    .nav__link {
        height: 100%;
        justify-content: initial;
        column-gap: .25rem;
        font-weight: var(--font-weight-medium);
    }

    .nav__link:hover, .nav__link.active {
        color: var(--background-color-dark-orange);
        background-color: transparent;
        font-weight: 800;
        transition: .2s;
    }

    .dropdown__item,
    .dropdown__subitem {
        position: relative;


    }

    .dropdown__menu,
    .dropdown__submenu {
        max-height: initial;
        overflow: initial;
        position: absolute;
        left: 0;
        top: 4rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s, top .2s;
        
    }

    .dropdown__link {
        padding-inline: 1rem 1.25rem;
        width: 12rem;
        font-weight: var(--font-weight-medium);
    }

    .dropdown__link:hover {
        background-color:var(--nav-background-hover-color);
       
    }
    .dropdown__sublink {
        padding-inline: 1rem;
        width: auto;
        margin: 0px;
        top: -.5rem;
    }
    .dropdown__subitem .dropdown__link {
        padding-inline: 1rem;
    }
    .dropdown__submenu {
        position: absolute;
        left: 100%;
        top: .5rem;    
    }
    /* SHOW DROP DOWN MENU */
    .dropdown__item:hover .dropdown__menu,
    .dropdown__item.active .dropdown__menu {

        opacity: 1;
        top: 2.9rem;
        pointer-events: initial;
        transition: top .3s;
        background-color: var(--nav-background-color-pure-white);
        z-index: 999;
 
        -webkit-box-shadow: 0px 0px 0px 1px rgba(66, 68, 90, 0.06);
        -moz-box-shadow: 0px 0px 0px 1px rgba(66, 68, 90, 0.06);
        box-shadow: 0px 0px 0px 1px rgba(66, 68, 90, 0.06);

    
    }

    .dropdown__subitem:hover > .dropdown__submenu,
    .dropdown__subitem.active > .dropdown__submenu {
        opacity: 1;
        pointer-events: initial;
        transition: top .3s;
    }

    .sublink__job {
        width: 13rem;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .dropdown__item.active .nav__link,
    .dropdown__item:hover .nav__link {
        color: var(--background-color-dark-orange); /* Same color as on hover */
        background-color: transparent; /* Same background as hover */
        font-weight: var(--font-weight-large); /* Same font weight as hover */
        transition: .2s; /* Add transition for smoothness */
    }


}