@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800');
/*font-family:'Raleway', sans-serif;*/
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,500i,700,900');
/*font-family:'Roboto', sans-serif;*/
@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700');
/*font-family:'Oswald', sans-serif;*/
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800&display=swap');
*{padding:0; margin:0;}
body{ font-family:'Poppins', sans-serif; font-size:14px; font-weight:400; padding:0; margin:0;}
a:hover{text-decoration:none;}
h1,h2,h3,h4,h5,h6,p {margin:0px; padding:0px; font-weight:400;}
::-moz-selection {color:#fff; background:#4379de;}
::selection {color:#fff; background:#4379de;}

.logo a {margin:0 auto; display:block; width:100%; text-align:center; padding:15px 0;}
.nav {background:#075493;}
.nav .navbar {display:block; width:100%; padding:0px;}
.nav .navbar .navbar-nav {padding:0px;}
.nav .navbar .navbar-nav {padding:0px; margin:0px auto;}
.nav .navbar .navbar-nav a {font-family:'Poppins', sans-serif; font-size:14px; line-height:20px; font-weight:500; text-transform:uppercase; color:#FFF; padding:18px 30px 12px 30px; border-bottom:3px solid rgba(255,255,255,0);}
.nav .navbar .navbar-nav a:link {color:#FFF;}
.nav .navbar .navbar-nav a:visited {color:#FFF;}
.nav .navbar .navbar-nav a.active {font-family:'Poppins', sans-serif; font-size:14px; line-height:20px; font-weight:500; text-transform:uppercase; color:#FFF; padding:18px 20px 12px 20px; border-bottom:3px solid rgba(255,255,255,0); border-bottom:3px solid rgba(255,255,255,1); background:#044275;}
.nav .navbar .navbar-nav a:hover {border-bottom:3px solid rgba(255,255,255,1); color:#FFF; background:#044275;}
.slider {background:url(../images/banner.jpg) no-repeat center/cover; height:222px; padding:60px 0;}
.slider h1 {font-size:40px; line-height:50px; font-weight:400; text-transform:uppercase; color:#000; display:block; margin:0 0 5px 0;}
.slider h1 span {font-weight:700;}
.slider p {font-size:16px; font-weight:400; display:block;}

.tools-tab-sec {padding:50px 0 30px 0;}
.tools-tab-sec .nav-pills { background: rgb(0,56,101); background: linear-gradient(17deg, rgba(0,56,101,1) 29%, rgba(7,84,147,1) 56%); }
.tools-tab-sec .nav-pills a img {margin-right:20px;}
.tools-tab-sec .nav-pills a {font-size:16px; line-height:25px; font-weight:600; text-transform:capitalize; color:#FFF; padding:17px 25px; border-bottom:3px solid rgba(255,255,255,0); border-bottom:1px solid #3a6f99; border-radius:0;}
.tools-tab-sec .nav-pills a.active {background:#f0f0f0 url(../images/tab-errow.png) no-repeat right 15px top 25px ; color:#000;}
.tools-tab-sec .nav-pills a:hover {background:#f0f0f0 url(../images/tab-errow.png) no-repeat right 15px top 25px ; color:#000;}

.tools-tab-sec .tab-content h2 {background:#ededed; font-size:22px; line-height:25px; font-weight:500; text-transform:capitalize; color:#000; padding:16px 20px; border-left:8px solid #075493; margin-bottom:20px;}
.tools-tab-sec .tab-content h2 span {color:#075493; font-weight:600;}

.website-tools-box {background: rgb(234,234,234); background: linear-gradient(0deg, rgba(234,234,234,1) 29%, rgba(250,250,250,1) 56%); border:2px solid #dadada;text-align:center; padding:30px 5px; border-radius:10px; margin-bottom:20px;}
.website-tools-box:hover { background: rgb(234,234,234); background: linear-gradient(173deg, rgba(234,234,234,1) 29%, rgba(250,250,250,1) 56%); }
.website-tools-box a {display:block;}
.website-tools-box img {margin-bottom:20px;}
.website-tools-box h4 {font-size:16px; line-height:25px; font-weight:500; text-transform:capitalize; color:#000;}

.social-media:after {clear:both; display:block; content:"";}
.social-media ul {margin:0px; padding:0px; width:100%;}
.social-media ul li {list-style:none; display:inline-block; width:20%; float:left; text-align:center; }
.social-media ul li a {display:block; padding:10px 0;}
.social-media ul li:hover {opacity:0.8;}

.footer {background:#033a67; padding:40px 0 0 0;}
.footer img {margin:0 auto 30px; text-align:center; display:block;}
.footer ul {padding:0 0 25px 0; margin:0px; text-align:center; }
.footer ul li {display:inline-block;}
.footer ul li a {font-size:14px; line-height:20px; font-weight:400; text-transform:capitalize; color:#fff; padding:0 10px;}
.footer ul li a:hover {color:#CCC;}
.footer p.copyright {font-size:14px; line-height:20px; font-weight:400; text-transform:capitalize; color:#fff; padding:15px 0; text-align:center; background:#002c51;}


.inner-section {padding:50px 0;}
.inner-section h2 {font-size:24px; line-height:24px; font-weight:500; text-transform:capitalize; color:#000; margin-bottom:20px;}
.inner-section h2 span {color:#075493; font-weight:600;}
.inner-section h3 {font-size:18px; line-height:22px; font-weight:500; text-transform:capitalize; color:#000; margin-bottom:20px;}
.inner-section p {font-size:16px; line-height:24px; font-weight:400; text-transform:capitalize; color:#696969; margin-bottom:25px;}


@media (min-width:320px) and (max-width:767px) {
.nav {background:none;}
.nav .navbar-toggler {position: absolute; right: 0; top:-50px; right:20px;}
.nav .navbar-nav {background:#033a67;}
.nav .navbar .navbar-nav a{padding:10px; border-bottom:1px solid #00467f!important;}
.nav .navbar .navbar-nav a.active{padding:10px; border:none;}
.nav .navbar .navbar-nav a:hover{border:none;}
.slider {padding:40px 0; height:auto;}
.slider h1 {font-size:25px; line-height:30px;}
.slider p {font-size:14px; line-height:20px;}
.tools-tab-sec .nav {margin-bottom:25px;}
.website-tools-box {padding:25px 10px; height:140px;}
.website-tools-box img {width:50%; margin-bottom:10px;}
.website-tools-box h4 {font-size:12px; line-height:14px;}
.social-media ul li img {height:20px;}
.footer ul li a {font-size:12px; padding: 0 5px;}
.footer p.copyright{font-size:12px;}}

@media (min-width:768px) and (max-width:991px) {
.nav {background:none;}
.nav .navbar-toggler {position: absolute; right: 0; top:-50px; right:20px;}
.nav .navbar-nav {background:#033a67;}
.tools-tab-sec .nav-pills a {font-size:12px; padding:10px 10px;background:#033a67;}
.tools-tab-sec .nav-pills a img {margin-right:10px;}
.tools-tab-sec .nav-pills a.active {background:#f0f0f0}
.website-tools-box {padding:15px; height:140px;}
.website-tools-box img {width:50%;}
.website-tools-box h4 {font-size:12px;}
.social-media ul li img {height:20px;}
.footer p.copyright {font-size:12px;}}
/*button*/
button { background-color: #033a67; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;}
button:hover{ background-color: black; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; margin: 4px 2px; cursor: pointer;
}
/*mainoption*/
.mainoptions {padding:50px 0 !important; margin: 5%;}
.mainoptions h2 {font-size:24px; line-height:24px; font-weight:500; text-transform:capitalize; color:#000; margin-bottom:20px;}
.mainoptions h2 span {color:#075493; font-weight:600;}
.mainoptions h3 {font-size:18px; line-height:22px; font-weight:500; text-transform:capitalize; color:#000; margin-bottom:20px;}
.mainoptions p {font-size:16px; line-height:24px; font-weight:400; text-transform:capitalize; color:#696969; margin-bottom:25px;}

/*input box*/
.inputbox {display: block; border: 1px #1da1f2 solid; width: 60%; padding: 10px; margin: 5px; border-radius: 10px;}
input[type=button], input[type=submit], input[type=reset] { background-color: #033a67; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;}
input[type=button], input[type=submit], input[type=reset]:hover{ background-color: black; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; margin: 4px 2px; cursor: pointer;
}
.dark-mode { background-color: black; color: white;}