/* Layout */



html {
  scroll-behavior: smooth;
}

html, body { width:100%; margin:0px; padding:0px; }

body { min-height: 100vh; display: flex;
    flex-direction: column; overflow-x: hidden!important; }


.container { 
    width:1200px;
    margin:0 auto;
    animation-name: fade-in-effect;
    animation-duration: 2s;
    animation-fill-mode: forwards; 
    opacity:0;
}


@keyframes fade-in-effect {
  0%   { 
opacity:0;

}
  100% { 
opacity:1;
}
}

.no-spacing { margin:0; padding:0; }

h1, h2 { border-bottom:6px solid #0396e6; padding-bottom:10px; font-family: "Raleway", sans-serif; font-weight: 500; margin:0;  font-size:32px; line-height:38px; color:#000; opacity:0.8; text-transform:uppercase; display:inline-block;}

h3 { color:#fff; font-family: "Raleway", sans-serif; font-size:26px; margin:0;  line-height:30px;}

h2.content-header, h3.content-header { color:#000; font-family: "Raleway", sans-serif; font-size:20px; font-weight:600; margin:0; line-height:24px; display:block; margin-bottom:10px; border-bottom:none;}

h3.table-header { font-family: "Raleway", sans-serif; font-size:18px; line-height:24px; font-weight:600; margin:0; }

h3.application-title {  font-family: "Raleway", sans-serif; font-size:16px; font-weight:600; color:#000;}


h4 {  font-family: "Raleway", sans-serif; font-size:16px; font-weight:600;  }

table, th, td {
  border: 1px solid #ccc;
  border-collapse: collapse;
}

th, td {
  padding:10px;
  font-size:14px; 
  line-height:18px;  
  font-family: "Open Sans", sans-serif; 

}

.responsive-table { overflow-x:auto; }

.table-title { width:100%; text-align:center; padding-top:10px; padding-bottom:10px;}

.grey-bg { background:#e8e8e8; }
.dark-grey-bg { background:#4a4a4a; color:#fff;  }
.blue-bg { background:#036eb7; color:#fff; }
.green-bg { background:#00843d; color:#fff; }
.orange-bg { background:#ffa300; color:#fff; }
.purple-bg { background:#893b67; color:#fff; }
.brown-bg { background:#a1561c; color:#fff; }
.light-green-bg { background:#67C539; color:#fff; }
.light-brown-bg { background:#ac8400; color:#fff; }
.table-grey-bg { background:#8A8A8A; color:#fff; }
.dark-blue-bg { background:#1e22aa; color:#fff;  }
.red-bg { background:#c8102e; color:#fff; }
.black-text {color:#000; }

.white-text { color:#fff; }

.button { border-radius:20px; border:1px solid #0396e6; padding:10px 20px; color:#000; font-family: "Raleway", sans-serif; font-weight: 500; font-size:16px; text-decoration:none; display:inline-block; transition:0.3s}
.button:hover { background:#0396e6; color:#fff}

.margin-bottom-10 { margin-bottom:10px;}
.margin-bottom-20 { margin-bottom:20px;}
.margin-bottom-30 { margin-bottom:30px;}
.margin-bottom-40 { margin-bottom:40px;}
.margin-bottom-60 { margin-bottom:60px;}
.margin-bottom-80 { margin-bottom:80px;}
.margin-bottom-100 { margin-bottom:100px;}
.margin-bottom-120 { margin-bottom:120px;}

.margin-top-10 { margin-top:10px;}
.margin-top-20 { margin-top:20px;}
.margin-top-30 { margin-top:30px;}
.margin-top-40 { margin-top:40px;}
.margin-top-60 { margin-top:60px;}
.margin-top-80 { margin-top:80px;}
.margin-top-100 { margin-top:100px;}
.margin-top-120 { margin-top:120px;}

p, ul, ol, li { font-size:16px; line-height:20px;  font-family: "Open Sans", sans-serif; color:#000; }

span { font-family: "Open Sans", sans-serif; }

p { opacity:0.8 }

.small-text { font-size:13px; line-height:16px; display:block; margin-top:10px;}

.font-size-16 { font-size:16px; }

hr { border-bottom:1px solid #ccc; border-top:none;}

.clear { clear:both; }

.responsive { max-width:100%; height:auto; display:block; }

.img-responsive { width:100%; height:auto; display:block; }

.page-top { padding-top:56px; }

.margin-top-60px { margin-top:60px }
.margin-top-30px { margin-top:30px }
.margin-top-10px { margin-top:10px }

.margin-right-20px { margin-right:20px }

ul.content-list li { margin-bottom:10px; }

ul.content-list-small-font li { font-size:14px; margin-bottom:10px; }

/* Top */


#top { background:#fff; width:100%; height:56px; position:fixed; transition: top 0.3s; top: 0; box-shadow: 0 0 60px rgba(0, 0, 0, 0.1)!important; z-index:99;}

.logo { position:absolute; left:20px; top:18px; z-index:100;}

.logo img { width:260px; height:19px; transition:0.3s; }
.logo img:hover { opacity:0.8; }

.desktop { display:block}
.mobile { display:none}

@media screen and (max-width: 768px) {
	
	.desktop { display:none}
	.mobile { display:block}
	
}

#nav-container { position:absolute; right:100px; z-index:100; }

 .topnav {
            padding: 10px;
            position: relative; /* Needed for absolute positioning of dropdowns */
            z-index: 1000; /* Ensure menu is above other elements */
        }

        .topnav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex; /* Use flexbox for horizontal menu layout */
        }

        .topnav li {
            /* No specific style, inherited from body in this case */
        }

        /* First level menu items */
        .topnav ul li a {
            display: block;
            color: #000;
			opacity:0.8;
            text-decoration: none;
            padding: 10px 15px;
            font-size: 16px;
			transition:0.3s;
			font-family: "Raleway", sans-serif;
			font-optical-sizing: auto;
			font-weight: 600;
			font-style: normal;
        }

        .topnav ul li a:hover {
            color:#0396e6;
			opacity:1;
        }

        /* Dropdown container */
        .dropdown {
            position: relative; /* Make the parent relative for absolute positioning of the dropdown content */
        }

        /* Dropdown button (optional, if you want a specific button) */
        .dropbtn {
            color: #787c87;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        .dropbtn:hover, .dropbtn:focus {

        }

        /* Dropdown content (hidden by default) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #fff;
            min-width: 200px;
       
            z-index: 1; /* Ensure dropdown appears above other content */
            left: 0;
        }

        /* Style for links inside the dropdown */
        .dropdown-content a {
            color: #333;
            padding: 12px 20px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            color:#0396e6;
        }

        /* Show the dropdown content on hover */
        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* Second level dropdown */
        .dropdown-submenu {
            position: relative;
        }

        .dropdown-submenu-content {
            display: none;
            position: absolute;
            left: 100%;
			top:0;
            background-color: #fff;
            min-width: 200px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
		
		.dropdown-submenu-content a::after  { display:none; }
				

        .dropdown-submenu:hover .dropdown-submenu-content {
            display: block;
        }

        .dropdown-submenu a {
            padding-right: 30px; /* Space for the arrow */
        }

        .dropdown-submenu a::after {
            content: "\00BB"; /* Right arrow */
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }


.icons { position:absolute; top:20px; right:20px;}
.nav-icon-img { width:20px; height:20px; transition:0.3s; margin-left:5px; margin-right:5px; }
.nav-icon-img:hover { opacity:0.6}

#nav-menu-button, #mobilenav { display:none}


/* Nav Mobile */

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

.icons { display:none}

#nav-container { display:none; } 

#nav-menu-button { display:block; position:absolute; top:5px; right:5px; }	
	
#nav-icon {
  width: 60px;
  height: 45px;
  position: relative;
  margin: 0 auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  scale:0.6;
}

#nav-icon span{
  display: block;
  position: absolute;
  height: 9px;
  width: 100%;
  background: #0396e6;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
  top: 18px;
}

#nav-icon span:nth-child(4) {
  top: 36px;
}

#nav-icon.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}


.topnavmobile { 
  background:#fff; 
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99; /* Sit on top */
  left: 0;
  top: 50px;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  
}	

.nav-mobile-dropdown-show-button::after { content:"+"; font-family: "Open Sans", sans-serif; font-size:30px; color:#0396e6; top:2px; right:17px; position:absolute; }
.nav-mobile-dropdown-hide-button::after { content:"-"; font-family: "Open Sans", sans-serif; font-size:30px; color:#0396e6; top:0; right:21px; position:absolute; }

.nav-mobile-inner-dropdown-show-button::after { content:"+"; font-family: "Open Sans", sans-serif; font-size:30px; color:#000; top:2px; right:-14px; position:absolute; }
.nav-mobile-inner-dropdown-hide-button::after { content:"-"; font-family: "Open Sans", sans-serif; font-size:30px; color:#000; top:0; right:-10px; position:absolute; }


.nav-arrow::after {
  position:absolute;
  border: solid #0396e6;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  top:19px; right:24px;
  content:"";
}

.sub-nav-arrow-inner::after {
  position:absolute;
  border: solid #000;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  top:9px; right:-38px;
  content:"";
}

.sub-nav-arrow::after {
  position:absolute;
  border: solid #000;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  top:9px; right:-6px;
  content:"";
}

.sub-nav-arrow-sustainability::after {
  position:absolute;
  border: solid #000;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  top:19px; right:-6px;
  content:"";
}

.nav-mobile-dropdown { 
   
    padding:10px 30px;
    position:relative; width:100%;
    background:#fff;
    
}

.nav-mobile-dropdown span { 
    
   font-family: "Open Sans", sans-serif; font-weight: normal; font-style: normal;
    font-size:16px;
    display:block;
    padding:0 30px;
    color:#000;
    
}

.nav-mobile-link { cursor:pointer; position:relative; display:block; font-family: "Open Sans", sans-serif; color:#000!important; text-decoration:none; font-size:16px; padding:12px 30px 10px 30px; }

.nav-sub-link { 
    
   cursor:pointer; position:relative; display:block; font-family: "Open Sans", sans-serif; color:#000!important; text-decoration:none; font-size:16px; padding:5px 30px;
   
}

.nav-sub-link-additional { 
    
   cursor:pointer; position:relative; display:block; font-family: "Open Sans", sans-serif; color:#000!important; text-decoration:none; font-size:16px; padding:10px 30px;
   
}

.mobile-icons { margin:20px auto; }

.nav-icon-img { width:30px; height:30px; transition:0.3s; margin-left:10px; margin-right:10px; }
	
  
}


/* Pagination */

.pagination { background:#72889a; width:100%;  }
.pagination-container { width:1200px; margin:0 auto; padding:18px 0; color:#fff; font-family: "Open Sans", sans-serif; font-size:13px;}

.pagination-container span { margin-left:10px; margin-right:10px; color:#fff;}
.pagination-container a { margin-left:10px; margin-right:10px;  text-decoration:none; color:#fff; transition:0.3s; opacity:0.6;  }
.pagination-container a:hover { opacity:1; }

.arrow {
  border: solid #fff;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.pagination-design {   width:100%; height:10px; background: linear-gradient(
    to right,
    #4a4a4a 0%,
    #4a4a4a 10%,
    #0396e6 10%,
    #0396e6 50%,
    #0979b6 50%,
    #0979b6 90%,
    #4a4a4a 90%,
    #4a4a4a 100%
  ); }


/* Footer & Others */

.footer-design-bar { margin-top:auto; background:#7d92a5; width:100%; height:20px; }
.footer-content { background:#71889a; color:#fff; width:100%; padding-top:30px; padding-bottom:30px; text-align:center;
font-size:12px; line-height:18px;  font-family: "Open Sans", sans-serif;
}

.footer-links { margin-left:100px; display:inline-block; }
.footer-links a { color:#ccc; text-decoration:none; transition:0.3s}
.footer-links a:hover { color:#fff }

#back-to-top {
  display: none;
  position: fixed; 
  bottom: 20px; 
  right: 30px; 
  z-index: 99; 
  border: none; 
  outline: none; 
  background-color: #fff; 
  cursor: pointer; 
  padding: 15px; 
  border-radius: 10px; 
  font-size: 18px; 
  border:1px solid #0396e6;
  
}

#back-to-top .arrow { border-color:#000}

#back-to-top:hover .arrow { border-color:#fff }

#back-to-top:hover {
  background-color: #0396e6; 

}

@media screen and (max-width: 768px) {
    
    .pagination-container { width:90%; }
        
    #back-to-top { right:10px; bottom:10px; padding:10px; font-size:16px; }
    .footer-links { margin:10px auto; display:block; }
    
    .mobile-img-side-spacing { width:90%; margin:0 auto; }
}

/* Search */

.search-result-form { position:relative; width:450px; }

.search-button-result-page { background:#000; float:left; border:none; padding:14px; color:#fff; margin-top:1px; cursor:pointer; right:26px;  position:absolute;}

.search-text-field { margin:10px auto; color:#333; display:block; font-family: "Open Sans", sans-serif; background:#fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)!important; border:1px solid #eee; padding:10px; width:100%; }

.search-result-title { font-family: "Open Sans", sans-serif; font-size:16px; font-weight:bold;  color:#000;  transition:0.3s; opacity:1; display:inline-block;}

.search-result-title:hover {  opacity:0.6; }

.search-result-url { font-family: "Open Sans", sans-serif; font-size:14px; font-weight:bold; color:#aaa; transition:0.3s; display:inline-block; }

.search-result-url:hover { text-decoration:underline; }

.search hr { margin-top:5px; margin-bottom:5px; padding:0; }

.search .text-field { color:#333; font-family: "Open Sans", sans-serif; font-size:18px; display:block; background:#fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)!important; border:1px solid #eee; padding:10px; width:100%; position:relative; }

.search-result-form { position:relative;width:450px; }

.search-no-results { color:#333; font-family: "Open Sans", sans-serif; font-size:16px; margin:30px 0;}

.search-function-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.search-function-modal-content {
  background-color: #fff;
  margin: 12% auto; /* 15% from the top and centered */
  padding: 20px;
  border-radius:20px;
  width: 260px; /* Could be more or less, depending on screen size */
  text-align:center;
  position:relative;
}

input[type=submit] { border-radius:20px; border:1px solid #0396e6; padding:10px 20px; color:#000; font-family: "Raleway", sans-serif; font-weight: 500; font-size:16px; text-decoration:none; display:inline-block; transition:0.3s; cursor:pointer;}

input[type=submit]:hover { background:#0396e6; color:#fff}


.search-function-modal-content p { font-size:14px; font-weight:normal; font-family: "Open Sans", sans-serif; display:block; margin-top:30px;}

.search-function-close {
  color: #0396e6;
  float: right;
  font-size: 40px;
  font-weight: bold;
  position:absolute;
  top:0; 
  right:15px;
}

.search-function-close:hover,
.search-function-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.search-content-container { width:1200px; position:relative; margin:80px auto; max-height:auto;}

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

.search-content-container { width:90%; position:relative; margin:40px auto;  }

.search-result-form { position:relative;width:100%; }

.search-button-result-page { background:#000; float:left; border:none; padding:8px; color:#fff; margin-top:1px; cursor:pointer; right:0;  position:absolute;}

.search-function-modal-content {
        margin: 40% auto; /* 15% from the top and centered */
    }
    
}