/* Top Header Section CSS Starts */
.sec-top-header {
	display: none;
	width: 100%;
	padding: 8px;
	background-color: var(--cw-blue);
	color: #ffffff;
	/* background-image: linear-gradient(45deg, var(--cw-blue) 53%, var(--cw-green) 80%); */
}

.top-hdr-btn {
    padding: 7px 18px;
    display: inline-block;
    margin-left: 10px;
    background-color: #ffffff;
	color: var(--cw-blue);
    border-radius: 26px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
}
/* Top Header Section CSS Ends */

/* Header Section CSS Starts */
header {
    width: 100%;
    box-shadow: 0px 1px 5px 0px #00000036;
    position: sticky;
    top: 0;
    z-index: 3;
}

.h-supp {
    width: 100%;
    position: relative;
    display: flex;
    padding-right: 30px;
    box-sizing: border-box;
    background-color: #fff;
}

header .logo-holder {
    padding-left: 30px;
    padding-right: 20px;
}

header a.logo {
	display: inline-flex;
}

header a.logo img {
	width: 196px;
	height: auto;
	padding: 10px 0;
	box-sizing: border-box;
}

#h-menu-btn {
    width: 0;
    position: absolute;
    left: 110%;
}

label.h-menu-btn {
	display: none;
	width: 40px;
	padding: 14px 30px 14px 20px;
	/* height: 100%; */
	gap: 5px;
	margin: auto 0;
	flex-direction: column;
	cursor: pointer;
	box-sizing: content-box;
}

label.h-menu-btn > hr {
    width: 100%;
    border-top: 2px solid #666;
    margin: 0;
    opacity: 1;
}

label.h-menu-btn-2 {
    height: 100%;
    display: flex;
    cursor: pointer;
}
header .menu {
    display: flex;
    margin-left: auto;
}

header .menu > a,
.dd-btn {
    text-decoration: none;
    white-space: nowrap;
    padding: 0 40px;
    display: inline-flex;
    height: 100%;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    font-size: 18px;
    color: var(--cw-black);
    position: relative;
    box-sizing: border-box;
}

.dd-btn span::after {
	content: "";
	width: 6px;
	height: 6px;
	border-bottom: 1px solid;
	border-right: 1px solid;
	border-color: #4d4d4d;
	display: inline-block;
	transform: rotate(45deg) translateY(-6px);
	margin-left: 6px;
}

.h-dropdown:hover > .dd-btn span::after {
	border-color: #fff;
}

.h-dropdown .dd-btn.active span::after {
	border-color: var(--cw-green);
}

header .menu > a.active,
.dd-btn.active {
	color: var(--cw-green);
	font-weight: 700;
	background-color: var(--cw-green-light);
}

header .menu > a:hover,
header .menu > a.active:hover,
.h-dropdown:hover .dd-btn,
.h-dropdown:hover .dd-btn.active {
	background-color: var(--cw-blue);
	color: #fff;
}

.h-dropdown input[name="h-dd"] {
    width: 0;
    height: 0;
    position: absolute;
    left: 110%;
}

.dd-content {
	display: none;
	position: absolute;
	width: 100%;
	left: 0;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px 0px #00000036;
	border-top: 1px solid #ededed;
	box-sizing: border-box;
}

.h-dropdown:hover > .dd-content {
	display: block;
}

.h-dropdown:hover > .dd-btn::after {
	content: "";
	width: 0;
	height: 0;
	border: solid 14px;
	border-color: var(--cw-blue) transparent transparent  transparent;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -3px);
	z-index:1;
}

.dd-content .container {
	display: grid;
	grid-template-columns: 40% 60%;
}

.dd-content a {
	display: inline-flex;
	gap: 20px;
	align-items: center;
	text-decoration: none;
	color: var(--cw-black);
	font-size: 18px;
	border-radius: 10px;
	box-sizing: border-box;
}

.dd-content a svg {
	width: 58px;
	height: 54px;
	padding: 10px 12px;
	background-color: var(--cw-green);
	border-radius: 10px;
}

.dd-content a svg path {
    fill: #fff;
}

.dd-content a:hover {
	color: #767676;
}
.dd-content a:hover svg {
	background-color: var(--cw-blue);
}

.dd-content a:hover svg path {
	fill: #fff;
}

.dd-content .right {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    row-gap: 18px;
    column-gap: 30px;
    padding-left: 40px;
    height: max-content;
}

.dd-content .left {
    padding-right: 40px;
    box-sizing: border-box;
    border-right: 1px solid #d3d3d3;
}

.dd-content .left .head {
    font-size: 40px;
    font-weight: 700;
    color: #000000;
}

.dd-content .left .body {
    margin-top: 5px;
    font-size: 20px;
    line-height: 1.4;
    color: #979797;
    margin-bottom: 20px;
}

[name="rbtn-edu"],
[name="supp-rbtn-edu"] {
	display: none;
}

[name="rbtn-edu"] + label {
	display: block;
	width: 100%;
	padding: 14px 20px 16px;
	border-radius: 0;
	margin-top: 4px;
	font-size: 22px;
	font-weight: 700;
	box-sizing: border-box;
	cursor: pointer;
}

[name="rbtn-edu"]:hover + label {
	background-color: #0000000d;
}

[name="rbtn-edu"]:checked + label { 
	background-color: #7aba461c;
	color: var(--cw-green);
	border-left: 10px solid var(--cw-green)
}

.h-dropdown.edu .right {
	display: none;
}

.h-dropdown.edu [name="supp-rbtn-edu"]:checked + .right { 
	display: grid;
}

.h-dropdown.edu .sub-h {
	display: none;
}
/* Header Section CSS Ends */

/* Header Section CSS Starts */
@media only screen and (max-width: 1440px) {
    header .menu > a, .dd-btn {
        padding: 0 30px;
    }
    .h-supp {
        padding-right: 20px;
    }
}
@media only screen and (max-width: 1310px) {
    header .menu > a, .dd-btn {
        padding: 0 20px;
    }
    .h-supp {
        padding-right: 10px;
    }
}
@media only screen and (max-width: 1170px) {
    header {
        position: fixed;
        top:0;
        min-width: 300px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        transition: background-color 0.5s;
        background-color: #040b1100;
    }
    .h-supp {
        padding-right: 0px;
        flex-direction: column;
        height: max-content;
        background-color: unset;
    }
    header .logo-holder {
        padding-left: 14px;
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: space-between;
        padding-right:0;
        box-sizing: border-box;
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: #fff;
        border-bottom: 1px solid #ffffff;
    }
    .body-top-sec {
        margin-top: 70px; /* with respective to header height */
    }
    header a.logo img {
        width: auto;
        height: 100%;
        margin: 0;
    }
    #h-menu-btn {
        display: block;
    }
    label.h-menu-btn {
        display: flex;
        gap: 5px;
        width: 30px;
    }
    header .menu {
        flex-direction: column;
        width: 100%;
        position: fixed;
        top: -260%;
        transition: top 0.6s;
        background-color: #fff;
    }
    header .menu > a, 
    .dd-btn {
        padding: 14px 40px;
        width: 100%;
        height: max-content;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
    .h-dropdown.edu .sub-h {
        background-color: #72af41;
        color: #ffffff;
        font-weight: 700;
        padding: 12px 50px;
        display: block;
        font-size: 19px;
    }

    header.opened {
        bottom: 0;
        background-color: #040b11e0;
    }
    header.opened .logo-holder,
    .h-supp .menu > * {
        border-bottom: 1px solid #ededed;
    }
    header.opened .menu {
        display: flex;
        position: relative;
        top: 0px;
    }
    
    .dd-content {
        display: block;
        position: static;
        height: 0;
        overflow: hidden;
        box-shadow: unset;
        border-top: none;
    }
    input[name="h-dd"]:checked + .dd-content {
        height: max-content;
    }
    .dd-content .container {
        padding: 0;
        display: block;
    }
    .dd-content .left,
    .dd-content a svg {
        display: none;
    }
    .dd-content .right {
        display: block;
        padding: 0;
    }
    .h-dropdown.edu .right,
    .h-dropdown.edu [name="supp-rbtn-edu"]:checked + .right { 
    	display: block;
    }
    .dd-content a {
        width: 100%;
        padding: 13px 60px;
        background-color: var(--cw-green);
        color: #ffffff;
        border-radius: 0;
        border-bottom: 1px solid #ffffff2e;
    }
    .dd-content a:hover {
        background-color: #649938;
        color: #ffffff;
    }
    .h-dropdown:hover > .dd-btn::after {
        content: unset;
    }
}

@media only screen and (max-width: 600px) {
    label.h-menu-btn {
        padding-right: 20px;
    }
    header .logo-holder {
        height: 62px;
    }
    .body-top-sec {
        margin-top: 62px; /* with respective to header height */
    }
}
/* Header Section CSS Ends */