@font-face {font-family: 'RalewayRegular';src: url('../../images/CNS%20157/RalewayRegular.eot');src: url('../../images/CNS%20157/RalewayRegular.eot') format('embedded-opentype'), url('../../images/CNS%20157/RalewayRegular.html') format('woff2'), url('../../images/CNS%20157/RalewayRegular.woff') format('woff'), url('../../images/CNS%20157/RalewayRegular-2.html') format('truetype'), url('../../images/CNS%20157/RalewayRegular.svg#RalewayRegular') format('svg');} @font-face {font-family: 'RalewayMedium';src: url('../../images/CNS%20157/RalewayMedium.eot');src: url('../../images/CNS%20157/RalewayMedium.eot') format('embedded-opentype'), url('../../images/CNS%20157/RalewayMedium.html') format('woff2'), url('../../images/CNS%20157/RalewayMedium.woff') format('woff'), url('../../images/CNS%20157/RalewayMedium-2.html') format('truetype'), url('../../images/CNS%20157/RalewayMedium.svg#RalewayMedium') format('svg');} body {font-size: 14px;line-height: 22px;margin: 0;padding: 0;} .navbar-inverse {background: none;border:none;} .navbar {margin: 0px;} .navbar-inverse .navbar-toggle .icon-bar {background-color: #334c97;} .navbar-nav > li > a {padding:0px;} .navbar-header {display: block;} .navbar-inverse .navbar-brand {display: none;} .navbar {min-height: auto;} .navbar-collapse {border-top: none;} a:active, a:hover {outline: none !important;} .headercontainer {float: left;width: 100%;background: #b3b3b3;} .menucontainer {float: left;width: 100%;} .menuH {float: left;width: 100%;} .menuH ul{margin: 0px;padding: 0px;display: table;margin: 0px auto;float: none;} .menuH ul li {list-style: none;float: left;text-decoration: none;padding: 0px 0px;} .menuH ul li a {float: right;font-size: 18px;color: #000 !important;padding: 14px 21px 27px;text-transform: uppercase;margin-bottom: -14px;text-align: center;font-family: 'RalewayRegular';margin-left: 4px;} .menuH ul li.selected a {background: url("../../images/CNS%20157/menuselect.png");background-repeat: no-repeat;background-size: 100% 100%;background-position: center top;} .menuH ul li a:hover{background: url("../../images/CNS%20157/menuselect.png");background-repeat: no-repeat;background-size: 100% 100%;background-position: center top;} .maindiv {float: left;width: 100%;background: #fff;} .logo{float:left;width:100%;} .logo img{padding: 15px;} .banner{float:left;width:100%;} .banner img{float:left;width:100%;} .servicecontainer {float: left;width: 100%;padding-bottom: 75px;} .services {float: left;width: 100%;} .servicehead {float: left;width: 100%;text-align: center;text-transform: uppercase;font-size: 35px;} .servicecap {float: left;width: 100%;text-align: center;font-size: 18px;padding-bottom: 50px;} hr {margin-top: 20px;margin-bottom: 3px;border: 0;border-top: 1px solid #eee;width: 89px;display: inline-block;} .service {float: left;width: 100%;} .ser {border: 10px solid #334c97;border-radius: 50%;text-align: center;width: 260px;height: 250px;padding: 15px;display: block;margin: auto;} .serin {float: left;border: 2px solid #334c97;border-radius: 50%;text-align: center;width: 210px;height: 200px;align-items: center;} .serimg {float: left;width: 100%;padding-top: 16px;} .serimg img {height: 50px;width: 50px;} .serhead {float: left;width: 100%;padding-top: 12px;font-size: 18px;} .welcomecontainer {float: left;width: 100%;background: #eeeeee;padding-top: 50px;} .welcome {float: left;width: 100%;padding: 35px;} .welhead {float: left;width: 100%;text-align: center;font-size: 30px;text-transform: uppercase;} .welhead span {float: left;width: 100%;padding-top: 15px;font-size: 45px;} .welicon {float: left;width: 100%;text-align: center;padding-top: 15px;} .welcontant {float: left;width: 100%;text-align: center;padding: 15px 0px 30px 0px;} .readmore {float: left;width: 100%;text-align: center;padding: 15px 0px;} .readmore a {text-align: center;background: #334c97;padding: 8px 24px;border-radius: 20px;text-decoration: none;color: #fff;text-transform: capitalize;} .projectcontainer {float: left;width: 100%;padding: 30px 0px;} .project {float: left;width: 100%;padding-top: 15px;} .prohead {float: left;width: 100%;text-align: center;font-size: 35px;text-transform: uppercase;} .pro:hover {border: 3px solid #334c97;} .ser:hover .sername {color: #fff;} .ser:hover .serread a {background: #0298bd;} .proicon {float: left;width: 100%;text-align: center;font-size: 18px;padding-bottom: 45px;} .pro {float: left;width: 100%;border: 3px solid #fff;} .proimg {float: left;width: 100%;} .proimg img {float: left;width: 100%;} .prod {float: left;width: 100%;background: #b3b3b3;height: 182px;} .prodetails {float: left;position: relative;background: #fff;top: -68px;margin: 12px;padding: 15px;} .prodhead {float: left;width: 100%;text-align: center;text-transform: uppercase;font-size: 25px;padding: 15px 0px;} .procontant {float: left;width: 100%;text-align: center;padding: 0px 19px 15px 19px;} .pro:hover .prodetails {background: #334c97;color: #fff;} .footer {float: left;width: 100%;text-align: center;color: #fff;padding: 16px 0px;background: #000;} .footer a{text-decoration: none;font-size: 15px;padding: 0px 5px;color: #fff;} @media(min-width:320px) and (max-width:399px){.menuH ul li {float: right;padding: 0px 3px;margin-bottom: 2px;width: 100%;} .menuH ul li.selected a {background: #334c97;width: 100%;text-align: right;} .menuH ul li a:hover {background: #334c97 !important;width: 100%;text-align: right;} .menuH ul li a {font-size: 14px;padding: 14px 21px 10px;margin-bottom: 0px;} .logo img {padding: 15px;width: 100%;} .pro:hover {border: 3px solid #334c97;} .pro {float: left;width: 100%;margin-bottom: 15px;} .servicehead {font-size: 22px;} .prod {height: auto;margin-bottom: 25px;margin-bottom: 0px;} .servicecap {font-size: 16px;padding-bottom: 40px;} hr {width: 50px;} .service {margin-bottom: 30px;} .welhead span {font-size: 30px;} .welhead {font-size: 20px;} .prodetails {position: initial;} .welicon {padding-top: 10px;} .welcome {padding: 0px;} .procontant {text-align: justify;padding: 0px;} .welcontant {text-align: justify;padding: 15px 0px;}} @media(min-width:400px) and (max-width:480px){.menuH ul li {float: right;padding: 0px 3px;margin-bottom: 2px;width: 100%;} .menuH ul li.selected a {background: #334c97;width: 100%;text-align: right;} .menuH ul li a:hover {background: #334c97 !important;width: 100%;text-align: right;} .menuH ul li a {font-size: 14px;padding: 14px 21px 10px;margin-bottom: 0px;} .pro:hover {border: 3px solid #334c97;} .pro {float: left;width: 100%;margin-bottom: 15px;} .prod {height: auto;} .prodetails {position: initial;} .menuH ul li a {padding: 16px 0px;margin-bottom: 5px;width: 131px;height: auto;} .menuH ul li.selected a {background: #334c97;} .menuH ul li a:hover {background: #334c97 !important;} .logo img {padding: 15px;width: 100%;} .servicehead {font-size: 22px;} .servicecap {font-size: 16px;padding-bottom: 40px;} hr {width: 50px;} .service {margin-bottom: 30px;} .welhead span {font-size: 30px;} .welhead {font-size: 20px;} .welicon {padding-top: 10px;} .welcome {padding: 0px;} .welcontant {text-align: justify;padding: 15px 0px;}} @media(min-width:481px) and (max-width:639px){.menuH ul li a {margin-bottom: 5px;}} @media(min-width:640px) and (max-width:767px){.menuH ul {float: right;width: 110px;} .logo img {width: 250px;} .menuH ul li {float: right;padding: 0px 3px;margin-bottom: 2px;width: 100%;} .menuH ul li.selected a {background: #334c97;width: 100%;text-align: right;} .menuH ul li a:hover {background: #334c97 !important;width: 100%;text-align: right;} .menuH ul li a {font-size: 14px;padding: 14px 21px 10px;margin-bottom: 0px;} .prod {} .menuH ul li.selected a {background: #334c97;} .menuH ul li a:hover {background: #334c97 !important;} .logo img {padding: 15px;} .servicehead {font-size: 22px;} .servicecap {font-size: 16px;padding-bottom: 40px;} hr {width: 50px;} .service {margin-bottom: 30px;} .welhead span {font-size: 30px;} .welhead {font-size: 20px;} .welicon {padding-top: 10px;} .welcome {padding: 0px;} .welcontant {text-align: justify;padding: 15px 0px;}} @media(min-width:768px) and (max-width:991px){.menuH ul li a {font-size: 14px;padding: 21px 0px;width: 110px;} .service {margin-bottom: 35px;} .servicecontainer {padding-bottom: 35px;} .menuH ul li {padding: 0px 2px;} .procontant {text-align: justify;padding: 0px;} .prodhead {font-size: 18px;padding: 15px 0px;} .menuH ul {float: right;} .pro:hover {border: 3px solid #334c97;} .pro {float: left;width: 100%;margin-bottom: 15px;} .prod {height: auto;margin-bottom: 25px;margin-bottom: 0px;} .prodetails {position: initial;} .logo img {padding: 15px;width: 294px;}} @media(min-width:992px) and (max-width:1200px){.menuH ul li a {font-size: 16px;padding: 22px 0px;width: 145px;} .prod {height: 218px;} .procontant {padding: 0px;} .service {margin-bottom: 35px;} .servicecontainer {padding-bottom: 35px;} .menuH ul li {padding: 0px 2px;} .pro:hover .prodetails {padding: 14px;} .menuH ul {float: right;} .logo img {padding: 15px;width: 294px;}} Below one is optional @media (min-width:1201px) and (max-width:1650px){}img{border:0px;padding:0px;}p {margin: 0px 0px 3px 0px;padding: 0px 0px 0px 0px;}a.footline{color: #808080;text-decoration: none;font-size:11px;color: #808080;} a.footline:hover{color: #808080;text-decoration: underline;font-size:11px;color: #808080;}