@charset "utf-8";
/* CSS Document */

::-webkit-scrollbar {
    display: none;
}

* { 
    margin: 0; padding: 0; box-sizing: border-box;
}

html
{
  	-webkit-tap-highlight-color:transparent; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */
	-o-user-select: none; user-select: none;
}

body {
	margin:0px; padding:0px; width:100%; height:100%; overflow:scroll; background-color:#fff; font-family:Arial; font-size: 14px; color:#000; line-height: 28px; text-decoration:none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display:flex; flex-direction:column; display: flex; justify-content: center; align-items: center; padding-left: 10%; padding-right: 10%;
}

p {font-size: 14px; line-height: 28px; text-align:justify; padding-top: 12px;} p a {text-decoration: none; color: #000}

.header {
	border: 1px solid #ccc; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; background-color: #c6d0da; height: 50px; width: 100%;
} 
.header img {width: 28px; height: auto; margin-right: 5px; border-radius: 50%;} .header img:hover {background-color: #fff;}

.menu {
	padding: 38px 0 18px ; display: flex; justify-content: space-between; align-items: center; width: 100%;
}

.menu-item {
	flex: 1; text-align: center; font-size: 14px; font-weight: 550;
} .menu-item a {text-decoration: none; color: #000;} .menu-item a:hover {color: #f05325;} .menu-item img {height: 38px; width: auto;}

.submenu {
  display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; border-radius: 7px;
}

.submenu a {
  color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left;
} submenu a:hover {color: #f05325;}

.menu-item:hover .submenu {
  display: block;
}

.logo {
	width: 150px; height: 150px; min-width: 120px; min-height: 120px; border-radius: 50%; 
	background: url('https://cgca.co.in/images/cgca-logo.png') no-repeat center; background-size: cover;
}

.workarea {
	width: 100%; padding: 28px 18px;
}

.flx {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; align-items: stretch;}
.flx-three {width: 32%; margin-bottom: 22px;} .flx-four {width: 23%; margin-bottom: 32px;}
.flx-six {width: 12.5%; text-align: center;} .flx-six-deskonly {width: 12.5%; text-align: center}
.flx13 {width: 24%; margin-bottom: 22px;} .flx31 {width: 66%; margin-bottom: 22px;}

.flx-three p {text-align:left;}

#profile img {border-radius: 50%; width: 54%; margin-bottom: 12px; margin-top: 15px; border: 2px solid #120063;}
#profile p {text-align:center; padding-top: 0px;} #profile span {font-size: 12px; color: #676767; line-height: 15px; text-align: center;}

#logo img {width: 80%; margin-bottom: 12px; margin-top: 15px;}
#logo p {text-align:center; padding-top: 0px; color: #2e2e2e; font-size: 14px;} #logo span {font-size: 12px; color: #676767; line-height: 15px; text-align: center;}


#normal-border {text-align: center; border: 1px solid #2e2e2e; border-radius: 7px; padding: 12px;}
.qrcode {width: 100%;}

.footer-one {
	border-top-left-radius: 7px; border-top-right-radius: 7px; background-color: #c6d0da; width: 100%; padding: 12px 16px; font-weight: 550;
} .footer-one a {text-decoration: none; color: #000;} .footer-one a:hover {color: #fff;} .footer-one p {padding-top: 0px;} 

.footer-two {
	background-color: #120063; width: 100%; padding: 12px 16px; font-weight: 550; color: #fff;
} .footer-two a {text-decoration: none; color: #fff;} .footer-two p {padding-top: 0px;} 

#right {float: right; text-align: right;} #left {float: left; text-align: left;}
.desktop {display: block;} .mobile {display: none;} #desktop {display: block;} #mobile {display: none;}
.landscapev {display: block;} .portraitv {display: none;}

#divborder {border: 1px solid #ccc; border-radius: 7px; padding: 15px 18px; cursor: pointer;} #divborder:hover {background-color:#D8D8D8;}

.lightbox { display: none; position: fixed; z-index: 999; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background: rgba(0,0,0,0.8);}
#trigger:checked ~ .lightbox {display: flex; align-items: center; justify-content: center;}
.lightbox div {background: white; padding: 20px; border-radius: 8px; position: relative; width: 370px; max-width: 80%;}

@media all and (max-width: 1024px) and (orientation: landscape) {
	body {padding-left: 4%; padding-right: 4%;}
	.flx-three {width: 48%;} .flx-six {width: 16.6%;} .flx-six-deskonly {display: none;}
}

@media all and (max-width: 768px) and (orientation: portrait) {
	body {padding-left: 4%; padding-right: 4%;}
	.flx-three {width: 100%;} .flx-four {width: 31%;} .flx-six {width: 16.6%;} .flx-six-deskonly {display: none;} .flx13 {width: 100%;} .flx31{width: 100%;}	
	#profile img {width: 60%;}
	.desktop {display: none;} .mobile {display: block;} #desktop {display: none;} #mobile {display: block;}
	#right, #left {float:none; text-align: center;}
	.landscapev {display: none;} .portraitv {display: block;}
}

@media all and (max-width: 736px), (max-width: 734px), (max-width: 684px), (min-resolution: 2dppx) and (orientation: landscape) {
	body {padding-left: 6%; padding-right: 6%;} p {font-size: 15px; line-height: 24px;}
	.flx-three {width: 100%;} .flx-four {width: 47%;} .flx-six {width: 33.3%;} .flx-six-deskonly {display: none;} .flx13 {width: 100%;} .flx31{width: 100%;}
	.desktop {display: none;} .mobile {display: block;} #desktop {display: none;} #mobile {display: block;}
	#right, #left {float:none; text-align: center;}	
}

@media all and (max-width: 667px) and (orientation: portrait) {
	body {padding-left: 4%; padding-right: 4%;} p {font-size: 15px; line-height: 24px;}
	.flx-three {width: 100%;} .flx-four {width: 100%;} .flx-six {width: 50%;} .flx-six-deskonly {display: none;} .flx13 {width: 100%;} .flx31{width: 100%;}
	#profile img {width: 60%;}
	.desktop {display: none;} .mobile {display: block;} #desktop {display: none;} #mobile {display: block;}	
	#right, #left {float:none; text-align: center;}
	.landscapev {display: none;} .portraitv {display: block;}
}

@media all and (max-width: 414px) and (orientation: portrait) {
	body {padding-left: 4%; padding-right: 4%;} p {font-size: 15px; line-height: 24px;}
	.flx-three {width: 100%;} .flx-four {width: 100%;} .flx-six {width: 50%;} .flx-six-deskonly {display: none;} .flx13 {width: 100%;} .flx31{width: 100%;}
	#profile img {width: 60%;}
	.desktop {display: none;} .mobile {display: block;} #desktop {display: none;} #mobile {display: block;}	
	#right, #left {float:none; text-align: center;}
	.landscapev {display: none;} .portraitv {display: block;}
}

@media all and (max-width: 375px) and (orientation: portrait) {
	body {padding-left: 4%; padding-right: 4%;} p {font-size: 15px; line-height: 24px;}
	.flx-three {width: 100%;} .flx-four {width: 100%;} .flx-six {width: 50%;} .flx-six-deskonly {display: none;} .flx13 {width: 100%;} .flx31{width: 100%;}
	#profile img {width: 60%;}
	.desktop {display: none;} .mobile {display: block;} #desktop {display: none;} #mobile {display: block;}	
	#right, #left {float:none; text-align: center;}
	.landscapev {display: none;} .portraitv {display: block;}
}

#normalbtn {border: 1px solid #fff; background-color: #393738; border-radius: 9px; padding: 12px; font-weight: 550; color: #fff; font-size: 14px; margin: 12px 0; cursor: pointer; text-align: center;} #normalbtn a{text-decoration: none; color: #fff}
#normalbtn:hover {background-color: #fff; color: #393738; border-color:#393738;} #normalbtn:hover a{text-decoration: none; color: #393738}

#switch {
	writing-mode:vertical-rl; transform: translate(0, -50%) rotate(180deg); background-color: #120063; padding: 15px; padding-left: 8px; padding-right: 12px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; right: 0px; top: 50%; position: fixed; color: #fff; border: 1px solid #120063; border-left: none; z-index: 999; 
} #switch a {color: #fff; font-size: 15px; font-weight: bold; text-decoration: none;} 

h1 {font-size: 20px; color: #2e2e2e;}
h2 {font-size: 18px; color: #2e2e2e;}
h3 {font-size: 14px; color: #2e2e2e;}
h5 {font-size: 14px; color: #ad0e13; line-height: 32px;}
h6 {font-size: 13px; color: #ad0e13; line-height: 48px;} h6 a {color: #2b2d91; text-decoration: none; font-weight: lighter;}
h7 {font-size: 10px; color: #2b2d91; line-height: 17px;}

.content {margin-bottom: 20px;}
.readMore {display: none;}
@media only screen and (max-width: 600px) {
	.content {width: 100%; height: 45px; overflow: hidden; position: relative; margin-bottom: 20px;}
	.content::after {content: ""; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1) 80%); position: absolute; bottom: 0; left: 0; width: 100%; height: 50px;}
	.readMore {display: inline-block; text-decoration: none; cursor: pointer; width: 100%; text-align: center; padding-bottom: 12px; color: #005AF5;}
}
	
/* ===========================
   ======== SIDE MENU ======== 
   =========================== */

.sidenav {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 101;
  top: 0;
  left: 100%;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  color:#2e2e2e;
  background-color: #E3ECF4;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 15px;
  color: #2e2e2e;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #2e2e2e;
}

.sidenav a:visited {
	text-decoration: none;
	color: #2e2e2e;
}

.sidenav a:link {
	text-decoration: none;
	color: #2e2e2e;
}

.sidenav a:active {
	text-decoration: none;
	color: 2e2e2e;
}

.sidenav a:hover {
	text-decoration: none;
	color: #2e2e2e;
}

.sidenav .closebtn {
  position: absolute;
  top: 25px;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  color:#2e2e2e;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* QR Code Lightbox */
.lightbox-qr {display: none; position: fixed; z-index: 9999; padding-top: 100px; width: 100%; height: 100%; top:0px; left 0px; background-color: rgba(0,0,0,0.9);}
.lightbox-content-qr {margin: auto; display: block; width: 25%; border-radius: 15px;}
.close-qr {position: absolute; top: 35px; right: 35px; color: #FF8A8C; font-size: 40px; font-weight: bold;}
.close-qr:hover, .close-qr:focus {color: #FE0004; text-decoration: none; cursor: pointer;}
#imgName {color: #f1f1f1; font-size: 14px; font-weight: bold; text-align: center; padding-top: 14px;}


/* Form Field */

::placeholder {color: #919191;}
:-ms-input-placeholder {color: #919191;}
::-ms-input-placeholder {color: #919191;}

#contact {padding-left:0px; padding-right:0px; margin:0 0; position:relative; width:100%;}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"], fieldset input[type="datetime-local"] { font-family:Arial; }
fieldset {border: medium none !important; margin: 0 0 6px; padding: 0; width: 100%; text-align:center;}
fieldset label {font-size: 11px; padding-bottom: 9px;}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="otp"],#contact input[type="url"], input[type="password"], input[type="file"], fieldset input[type="datetime-local"], #contact textarea, #contact select {
	width:100%; border:1px solid #fff; border-radius: 5px; background:#F9F9F9; margin:0 0 8px; padding:12px; color:#2e2e2e; background-position:right; background-repeat:no-repeat; background-size:28px;
}
#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, input[type="password"], input[type="file"], fieldset input[type="datetime-local"], #contact textarea:hover, #contact select{
	-webkit-transition:border-color 0.3s ease-in-out; -moz-transition:border-color 0.3s ease-in-out; transition:border-color 0.3s ease-in-out; border:1px solid #fff;
}
#contact input[type="text"]:focus, #contact input[type="email"]:focus, #contact input[type="tel"]:focus, #contact input[type="url"]:focus, input[type="password"], input[type="file"], fieldset input[type="datetime-local"], #contact textarea:focus { 
	-webkit-transition:border-color 0.3s ease-in-out; -moz-transition:border-color 0.3s ease-in-out; transition:border-color 0.3s ease-in-out; border:1px solid #fff;	
}

#contact input[type="text"]:active, #contact input[type="email"]:active, #contact input[type="tel"]:active, #contact input[type="url"]:active, input[type="password"], input[type="file"], fieldset input[type="datetime-local"], #contact textarea:active {outline:0; border:1px solid #999;}
#contact input[type="text"]:focus, #contact input[type="email"]:focus, #contact input[type="tel"]:focus, #contact input[type="url"]:focus, input[type="password"], input[type="file"], fieldset input[type="datetime-local"], #contact textarea:focus {box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5);}

#contact textarea {height:100px; max-width:100%; resize:none;}
#contact button[type="submit"] {background-color:#333; border-radius:5px; width:100%; color:#fff; text-align:center; cursor:pointer; border: 1px solid #ccc; margin-top:6px; padding: 10px; font-size:12px; font-weight: 900; float: left;}
#contact button[type="submit"]:hover {background-color:#FDC100; color: #333;}
#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
#contact input:focus, #contact textarea:focus { outline:0; border:1px solid #999;}

.mitraabtn {background-color:#333; border-radius:5px; width:auto; color:#fff; text-align:center; cursor:pointer; border: 1px solid #ccc; margin-top:6px; padding: 10px; font-size:12px; font-weight: 900;}
.mitraabtn:hover {background-color:#120063;}