.container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 54px 40px 70px;
	box-sizing: border-box;
}

/* section style */
[class|="sec"] .head {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 60px;
}

[class|="sec"] .head .txt {
	color: var(--cw-black);
	position: relative;
}

[class|="sec"] .head .txt::after {
	content: "";
	width: 64%;
	height: 8px;
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	background-image: linear-gradient(90deg, var(--cw-blue) 60%, transparent 60%, transparent calc(60% + 14px), var(--cw-green) calc(60% + 14px));
}

[class|="sec"] .head.lb {
    margin-right: 30px;
    margin-bottom: 40px;
}

[class|="sec"] .head.lb .txt {
	position: relative;
	font-size: calc(1vw + 1em);
    font-weight: 900;
}

[class|="sec"] .head.lb .txt::after {
	top: calc(100% + 16px);
}

/* Button */
.btn {
    text-align: center;
    width: max-content;
    cursor: pointer;
    transition: box-shadow 0.2s, background-color 0.2s, transform 0.1s;
}

a.btn {
    text-decoration: none;
}

/* Button Click */
.btn.clk:active {
	transform: translate(2px, 2px);
}

/* Website Flavoured Button  */
.btn.flav {
    padding: 14px 40px 16px;
    border-radius: 30px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    box-shadow: -2px 2px 6px 0px #0000003b;
}

.btn.flav:active {
    box-shadow: 0px 0px 0 0px #00000030;
}

/* Green to Blue or  Blue to Green */
.btn.g_b,
.btn.b_g:hover {
    background-color: var(--cw-green);
}

.btn.b_g,
.btn.g_b:hover {
    background-color: var(--cw-blue);
}

.btn.g_b:focus,
.btn.g_b:active {
    background-color: var(--cw-blue);
}

.btn.b_g:focus,
.btn.b_g:active {
    background-color: var(--cw-green);
}

.btn.bor_ful {
	background-color: #fff;
	border: 1px solid #aaa;
	color: #555;
	
}

.btn.bor_ful:hover {
	background-color: var(--cw-blue);
	border: 1px solid var(--cw-blue);
	color: #fff;
}

/* Nav Buttons Styling */
.nav-btn-group {
    display: flex;
    column-gap: 14px;
    justify-content: end;
    margin-top: 16px;
}

.nav-btn {
    padding: 14px;
    width: max-content;
    height: max-content;
    background-color: #ffffff1f;
    border-radius: 9px;
    display: inline-flex;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s;
}

.nav-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.1s;
}

.nav-btn svg path {
	stroke: #ffffffbd;
}

.nav-btn[id|="left"]:active svg {
    transform: translate(-2px, 2px);
}
.nav-btn[id|="right"]:active svg {
    transform: translate(2px, 2px);
}

/* Dialog box css */
#shade-body {
	display: none;
    position: fixed;
	top: 0;
    right: 0;
	bottom: 0;
	left: 0;
    height: 100%;
    width: 100%;
	z-index:3;
	align-items: center;
    justify-content: center;
}

.shade-fill-area {
	background-color: rgba(0, 0, 0, 0.7);
	height: 100%;
    width: 100%;
}

#dialog-box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 350px;
	background-color: #fff;
	border-radius: 20px;
	overflow: hidden;
	font-family: sans-serif;
	border: 1px solid #ddd;
}

#dialog-box.ok {
	background-color: var(--cw-green-light);
	border: 1px solid var(--cw-green);
}

#dialog-box-msg {
	color: rgb(85, 85, 85);
	padding: 40px 40px 36px;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	line-height: 1.5;
	font-size: 22px;
}

.dialog-box-buttons {
    width: 100%;
    display: flex;
	align-items: center;
    justify-content: space-around;
}

[id|="dialog-box-button"] {
    /* width: 100px; */
    /* height: 35px; */
    padding: 10px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px solid;
    border-radius: 30px;
    margin: 10px 10px 32px;
    font-size: 20px;
    font-weight: 600;
    transition: filter 0.1s, background-color 0.2s;
}

#dialog-box-button-cancel {
	background-color: var(--cw-black);
	border-color: var(--cw-black);
	color: rgb(255, 255, 255);
}

#dialog-box-button-cancel:hover {
	background-color: #fff;
	color: var(--cw-black);	
}

#dialog-box-button-ok {
	background-color: var(--cw-green);
	border-color: var(--cw-green);
	color: rgb(255, 255, 255);
}

#dialog-box-button-ok:hover {
	background-color: rgb(255, 255, 255);
	color: var(--cw-green);
}

#dialog-box.ok #dialog-box-button-ok:hover {
	background-color: var(--cw-green-light);
}

[id|="dialog-box-button"]:active {
	filter: opacity(0.3);
}


body > * {
	overflow: hidden;
}

header {
	overflow: visible;
}
/* Universal CSS End */

/* (Responsive) Universal CSS Starts */
@media only screen and (max-width:560px) {
    .container {
    	padding-left: 20px;
    	padding-right: 20px;
    }
}

@media only screen and (max-width:380px) {
    .container {
    	padding-top: 30px;
        padding-bottom: 50px;
    }
    [class|="sec"] .head {
        margin-bottom: 60px;
    }
    [class|="sec"] .head .txt {
    	font-size: calc(1vw + 0.7em);
    }
    [class|="sec"] .head.lb {
        margin-bottom: 30px;
    }
    
    [class|="sec"] .head.lb .txt {
    	position: relative;
    	font-size: calc(1vw + 0.8em);
        font-weight: 900;
    }
}
/* (Responsive) Universal CSS Ends */