/*--------------------------------------------------------------------- File Name: style.css ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- import Fonts ---------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan&display=swap');

/*****---------------------------------------- 1) font-family: 'Rajdhani', sans-serif;
 2) font-family: 'Poppins', sans-serif;
 ----------------------------------------*****/


/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/

@import url(animate.min.css);
@import url(normalize.css);
@import url(meanmenu.css);
@import url(owl.carousel.min.css);
@import url(slick.css);
@import url(jquery-ui.css);
@import url(nice-select.css);

/*--------------------------------------------------------------------- skeleton ---------------------------------------------------------------------*/

* {
     box-sizing: border-box !important;
     font-family: Tahoma, Geneva, sans-serif;
}

html {
     scroll-behavior: smooth;
}

body {
     color: #666666;
     font-size: 14px;
     font-family:  Tahoma, Geneva, sans-serif;
     line-height: 1.80857;
     font-weight: normal;
}

a {
     color: #1f1f1f;
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     letter-spacing: 0;
     font-weight: normal;
     position: relative;
     padding: 0 0 10px 0;
     font-weight: normal;
     line-height: normal;
     color: #111111;
     margin: 0
}

h1 {
     font-size: 24px;
}

h2 {
     font-size: 22px;
}

h3 {
     font-size: 18px;
}

h4 {
     font-size: 16px
}

h5 {
     font-size: 14px
}

h6 {
     font-size: 13px
}

*,
*::after,
*::before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
     color: #212121;
     text-decoration: none !important;
     opacity: 1
}

button:focus {
     outline: none;
}

ul,
li,
ol {
     margin: 0px;
     padding: 0px;
     list-style: none;
}

p {
     margin: 0px;
     font-weight: 300;
     font-size: 15px;
     line-height: 24px;
}

a {
     color: #222222;
     text-decoration: none;
     outline: none !important;
}

a,
.btn {
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

img {
     max-width: 100%;
     height: auto;
}

:focus {
     outline: 0;
}

.btn-custom {
     margin-top: 20px;
     background-color: transparent !important;
     border: 2px solid #ddd;
     padding: 12px 40px;
     font-size: 16px;
}

.lead {
     font-size: 18px;
     line-height: 30px;
     color: #767676;
     margin: 0;
     padding: 0;
}

.form-control:focus {
     border-color: #ffffff !important;
     box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}

.navbar-form input {
     border: none !important;
}

.badge {
     font-weight: 500;
}

blockquote {
     margin: 20px 0 20px;
     padding: 30px;
}

button {
     border: 0;
     margin: 0;
     padding: 0;
     cursor: pointer;
}

.full {
     float: left;
     width: 100%;
}

.layout_padding {
     padding-top: 90px;
     padding-bottom: 90px;
}

.layout_padding_2 {
     padding-top: 75px;
     padding-bottom: 75px;
}

.light_silver {
     background: #f9f9f9;
}

.theme_bg {
     background: #38c8a8;
}

.margin_top_30 {
     margin-top: 30px !important;
}

.full {
     width: 100%;
     float: left;
     margin: 0;
     padding: 0;
}


/**-- heading section --**/


/*---------------------------- preloader area ----------------------------*/

.loader_bg {
     position: fixed;
     z-index: 9999999;
     background: #fff;
     width: 100%;
     height: 100%;
}

.loader {
     height: 100%;
     width: 100%;
     position: absolute;
     left: 0;
     top: 0;
     display: flex;
     justify-content: center;
     align-items: center;
}

.loader img {
     width: 280px;
}


/*-- navigation--*/

.navigation.navbar {
     float: inline-end;
     padding-top: 26px;
}

.navigation2.navbar2 {
     float: inline-end;
     padding-top: 26px;
}

.navigation.navbar-dark .navbar-nav .nav-link {
     padding: 0 15px;
     color: #fff;
     font-size: 16px;
     line-height: 20px;
     text-transform: uppercase;
}

.navigation2.navbar-dark2 .navbar-nav2 .nav-link2 {
     padding: 0 15px;
     color: #000;
     font-size: 16px;
     line-height: 20px;
     text-transform: uppercase;
}

.navigation.navbar-dark .navbar-nav .nav-link:focus,
.navigation.navbar-dark .navbar-nav .nav-link:hover {
     color: #000;
}

.navigation2.navbar-dark2 .navbar-nav2 .nav-link2:focus,
.navigation2.navbar-dark2 .navbar-nav2 .nav-link2:hover {
     color: #000;
}

.navigation.navbar-dark .navbar-nav .active>.nav-link,
.navigation.navbar-dark .navbar-nav .nav-link.active,
.navigation.navbar-dark .navbar-nav .nav-link.show,
.navigation.navbar-dark .navbar-nav .show>.nav-link {
     color: #fdd430;
}

.navigation2.navbar-dark2 .navbar-nav2 .active>.nav-link2,
.navigation2.navbar-dark2 .navbar-nav2 .nav-link2.active,
.navigation2.navbar-dark2 .navbar-nav2 .nav-link2.show,
.navigation2.navbar-dark2 .navbar-nav2 .show>.nav-link2 {
     color: #fdd430;
}

.navbar-expand-md .navbar-nav {
     padding-right: 10px;
}

.sign_btn a {
     background-color: #2d2c2c;
     display: inline-block;
     padding: 7px 35px;
     border-radius: 30px;
     color: #fff;
     font-size: 17px;
}

.sign_btn a:hover {
     color: #0aec98;
}


/*-- header area --*/


/*--------------------------------------------------------------------- top banner area ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- layout new css ---------------------------------------------------------------------*/
/* 
.head-top {
     background-repeat: no-repeat;
} */

/* .navbar-toggler{
     margin-bottom: 0px;
} */

.head_top {
     background-repeat: no-repeat;
}

.header {
     width: 100%;
     display: block;
     /* background: transparent; */
     padding: 30px 30px;
     position: absolute;
     z-index: 999;
}

.navbar2 {
     display: none;
}

.navbar3 {
     display: none;
}

.header2 {
     display: block;
     width: 100%;
     background: transparent;
     padding: 10px 30px;
     /* position: absolute; */
     z-index: 999;
}

.header2 .navbar-nav {
     margin-top: 3%;
}

.navbar-nav .nav-link {
     color: #000 !important;
}

.logo a {
     font-size: 40px;
     font-weight: bold;
     text-transform: uppercase;
     color: #fff;
     line-height: 40px;
}

.logo a img {
     width: 100%;
     margin-left: 0px;
}

.text-bg {
     text-align: left;
     max-width: 529px;
     width: 100%;
     float: left;
     padding-top: 20px;
     padding-left: 10px;
     padding-bottom: 50px;
}

.text-bg strong {
     font-size: 30px;
     line-height: 35px;
     color: #2d2c2c;

}

/* .text-bg span {
     font-family: 'Baloo Chettan', cursive;
     color: #0C5C9F;
     font-size: 40px;
     line-height: 77px;
     font-weight: bold;
     padding-bottom: 20px;
     display: block;
} */

.text-bg a {
     margin-top: 30px;
     font-size: 17px;
     background-color: #2d2c2c;
     color: #fff;
     padding: 13px 0px;
     width: 100%;
     max-width: 190px;
     text-align: center;
     display: inline-block;
     transition: ease-in all 0.5s;
     border-radius: 15px;
}

.text-bg a:hover {
     background-color: #0C5C9F;
     color: #fff;
     transition: ease-in all 0.5s;
     border-radius: 26px;
}

.text-img {
     height: 750px;
     background: #045A9A;
     /* background: linear-gradient(90deg, rgba(4, 90, 154,1) 40%, rgba(143,217,250,1) 100%); */
     border-radius: 100% 0% 0% 100%;
     padding: 250px 20px 90px 50px;
     /* margin-top: 10%; */
}

.text-img figure {
     /* margin-top: 90px; */
     margin: 0px;
}


/* .text-img figure {
     position: relative;
} */


@media (max-width: 600px) {
     .navbar2 {
          display: block;
     }

     .header2 {
          display: none;
     }

     .navbar3 {
          display: block;
     }

     .header {
          display: none;
     }

     .navbar-collapse {
          background-color: #045A9A;
     }

     .text-img {
          height: auto;
          border-radius: inherit;
          padding: 40px 40px 40px 40px;
     }

     .logo a img {
          width: 50%;
          margin-left: -15%;
     }

     /* .text-bg {
          text-align: left;
          max-width: 529px;
          width: 100%;
          float: left;
          padding-top: 100px;
          padding-left: 10px;
          padding-bottom: 50px;
     } */

     /* .text-bg strong {
          font-size: 30px;
          line-height: 35px;
          color: #2d2c2c;

     } */
}

.titlepage {
     text-align: center;
     padding-bottom: 40px;
}

.titlepage h2 {
     font-size: 50px;
     color: #3e3e3e;
     line-height: 50px;
     font-weight: bold;
     padding: 0;
}

.d_flex {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
}


/** about section **/

.about {
     margin-top: 10px;
     background: #23262d;
     padding: 60px 0;
}

.about .titlepage h2 {
     margin-bottom: 20px;
     color: #fff;
}

.about .titlepage span {
     color: #fff;
     font-size: 17px;
}

.about .about_box {
     text-align: center;
}

.about .about_box figure {
     margin: 0;
}

.about .about_box figure img {
     width: 100%;
}

.about .about_box .read_more {
     background: #000;
     color: #fff;
     border-radius: 15px;
}

.about .about_box .read_more:hover {
     background: #f55171;
}


/** end about section **/


/** best section **/

.best {
     background: #fff;
     margin-top: 90px;
}

.best .titlepage h2 {
     color: #030100;
     margin-bottom: 20px;
}

.best .titlepage span {
     color: #23262d;
     font-size: 17px;
     line-height: 28px;
}

.best_box {
     text-align: center;
     background-color: #0C5C9F;
     border-radius: 20px;
     padding: 30px 20px;
     margin-bottom: 30px;
}

.best_box h4 {
     color: #fff;
     text-transform: uppercase;
     font-size: 30px;
     line-height: 40px;
     font-weight: 500;
     padding: 0;
}

.best_box p {
     color: #fff;
     font-size: 17px;
     line-height: 28px;
     padding-top: 25px;
}

.best .read_more {
     margin: 0 auto;
     display: block;
     border-radius: 15px;
     margin-top: 30px;
     background-color: #000;
     color: #fff;
}

.best .read_more:hover {
     background-color: #0C5C9F;
}


/** end best section **/


/** request section **/

.padd_leri0 {
     padding-left: 0;
     padding-right: 0;
}

.request .titlepage h2 {
     margin-bottom: 20px;
     padding-bottom: 10px
}

.request .titlepage span {
     font-size: 17px;
     line-height: 28px;
}

.request {
     padding: 40px;
}

.main_form {
     padding: 50px 0px 50px 40px;
}

.black_bg {
     background-color: #2c363d;
}

.request .main_form .contactus {
     border: inherit;
     padding: 0px 19px;
     margin-bottom: 20px;
     width: 100%;
     height: 60px;
     background: #fff;
     color: #353535;
     font-size: 17px;
     border-radius: 15px;
}

.request .main_form .textarea {
     border: inherit;
     padding: 0px 19px;
     margin-bottom: 20px;
     width: 100%;
     height: 140px;
     background: #fff;
     color: #353535;
     font-size: 17px;
     border-radius: 15px;
     padding-top: 51px;
}

.request .main_form .send_btn {
     font-size: 17px;
     transition: ease-in all 0.5s;
     background-color: #000;
     color: #fff;
     padding: 13px 0px;
     margin: 0 auto;
     max-width: 200px;
     width: 100%;
     display: block;
     margin-top: 30px;
     border-radius: 15px;
}

.request .main_form .send_btn:hover {
     background-color: #0C5C9F;
     transition: ease-in all 0.5s;
     color: #fff;
     border-radius: 26px;
}

#request *::placeholder {
     color: #353535;
     opacity: 1;
}

.mane_img figure {
     margin: 0;
}

.mane_img figure img {
     width: 100%;
}


/** end request section **/

.read_more {
     font-size: 17px;
     background-color: #fff;
     color: #000;
     padding: 13px 0px;
     width: 100%;
     max-width: 190px;
     text-align: center;
     display: inline-block;
     transition: ease-in all 0.5s;
}

.read_more:hover {
     background: #000;
     color: #fff;
     border-radius: 26px;
     transition: ease-in all 0.5s;
}


/** two_box section section **/

.two_box {
     background: #0C5C9F;
     margin: 20px 0;
     padding: 20px 40px;
}

.two_box figure {
     margin: 0;
}

.two_box figure img {
     width: 100%;
}

.two_box h2 {
     color: #fff;
     font-size: 60px;
     line-height: 65px;
     padding-bottom: 25px;
}

.two_box p {
     font-size: 17px;
     line-height: 28px;
     color: #fff;
}

.offer {
     font-size: 100px;
}


/** end two_box section **/


/** testimonial section **/

.testimonial {
     margin-top: 40px;
     padding-bottom: 120px;
     background: #fff;
}

.testimonial .titlepage h2 {
     color: #1c1b1b;
}

.testimonial_Carousel .carousel-caption {
     position: inherit;
     padding: 0;
}

.testimonial_box {
     text-align: center;
}

.test_box {
     padding-bottom: 35px;
}

.padd_rightt0 {
     padding-right: 10px;
}

.padd_leftt0 {
     padding-left: 10px;
}

.testimonial_Carousel .test_box h3 {
     font-size: 30px;
     color: #0C5C9F;
     line-height: 32px;
     display: inline-block;
     margin-top: 10px;
}

.testimonial_Carousel .test_box .test_position {
     padding-bottom: 20px;
     color: #0C5C9F;
}

.testimonial_Carousel .test_box .test_sentence {
     color: #0C5C9F;
     font-weight: 800;
     font-size: 30px;
     margin-top: 20px;
}

.testimonial_Carousel .test_box p {
     font-size: 17px;
     line-height: 28px;
     color: #1c1b1b;
     font-style: Italic;
}

.testimonial_Carousel .carousel-indicators {
     bottom: -30px;
}

.testimonial_Carousel .carousel-indicators li {
     width: 15px;
     height: 13px;
     background: #0C5C9F;
}

.testimonial_Carousel .carousel-indicators li.active {
     background: #0c0c0e;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
     display: none;
}


/** end testimonial section **/


/** footer **/

.multi {
     color: #0C5C9F;
     font-weight: bold;
     font-size: 40px;
}

.footer {
     border-top: #000 solid 1px;
     /* font-family: Poppins; */
     background: #fff;
     padding-top: 50px;
}

.cont {
     text-align: left;
}

.cont h3 {
     color: #0c0c0e;
     font-size: 37px;
     line-height: 55px;
     font-weight: bold;
}

.cont h4 {
     color: #0c0c0e;
     font-size: 20px;
     line-height: 55px;
     font-weight: bold;
}

.cont_call h3 {
     color: #0c0c0e;
     font-size: 50px;
     line-height: 60px;
     font-weight: bold;
}

.cont_call h4 {
     color: #0c0c0e;
     font-size: 20px;
     line-height: 40px;
     font-weight: bold;
}

.cont_support h3 {
     text-align: center;
     margin-left: -90px;
}

.cont_service h3 {
     text-align: left;
     margin-left: 20%;
}

.cont_email {
     margin-top: 20px;
}


.social-links {
     margin: 0 10px;
}

.social-links a {
     font-size: 24px;
     display: inline-block;
     background: #0C5C9F;
     color: #fff;
     line-height: 1;
     padding: 8px 0;
     margin-right: 4px;
     border-radius: 4px;
     text-align: center;
     width: 40px;
     height: 40px;
     transition: 0.3s;
}

.social-links a:hover {
     background: #374F8C;
     text-decoration: none;
}


.cont_support ul {
     text-align: left;
     color: #0c0c0e;
     font-size: 20px;
     margin-top: 10px;
     margin-left: 26%;
     line-height: 60px;
     font-weight: bold;
}

.cont_service ul {
     text-align: left;
     color: #0c0c0e;
     font-size: 20px;
     margin-top: 8px;
     margin-left: 23%;
     line-height: 60px;
     font-weight: bold;
}

.cont_support ul li a {
     text-decoration: none;
}

.cont_service ul li a {
     text-decoration: none;
}

.cont_support ul li:hover>a {
     color: #0C5C9F;
}

.cont_service ul li:hover>a {
     color: #0C5C9F;
}

.cont_call h4 a {
     text-decoration: none;
     color: #000;
}

.cont_email h4 {
     color: #0c0c0e;
     font-size: 20px;
     line-height: 30px;
     font-weight: bold;
}

.cont_email h4 a {
     text-decoration: none;
     color: #000;
}

.copyright {
     margin-top: 43px;
     padding: 20px 0px;
     background-color: #23262d;
}

.copyright p {
     color: #fff;
     font-size: 18px;
     line-height: 22px;
     text-align: center;
}

.copyright a {
     color: #fff;
}

.copyright a:hover {
     color: #0C5C9F;
}


@media (max-width:600px) {
     .cont_support {
          margin-top: 30px;
     }

     .cont_support ul {
          text-align: left;
          color: #0c0c0e;
          font-size: 20px;
          margin-top: 10px;
          margin-left: 2%;
          line-height: 60px;
          font-weight: bold;
     }

     .cont_support h3 {
          text-align: left;
          margin-left: 2px;
     }
     .cont_service h3 {
          text-align: left;
          margin-left: 0%;
     }

     .cont_service ul {
          text-align: left;
          color: #0c0c0e;
          font-size: 20px;
          margin-top: 8px;
          margin-left: 2%;
          line-height: 60px;
          font-weight: bold;
     }
}

/** end footer **/



/** about **/

.about2 {
     background-color: #fff;
     padding-top: 40px;
     /* margin-top: 5%; */
}

.about2 .titlepage {
     text-align: left;

}

.about2 .titlepage h2 {
     max-width: inherit;
     border: inherit;
     margin-bottom: 10px;
     color: black;
}

.about2 .titlepage p {
     padding: 5px 0;
     font-size: 16px;
     font-weight: 600;
     color: #000;
}

.about_img2 figure {
     margin: 0;
}

.about_img2 figure img {
     width: 100%;
}

.read_more2 {
     font-size: 17px;
     background-color: #0C5C9F;
     color: #fff !important;
     padding: 13px 0px;
     width: 100%;
     max-width: 190px;
     text-align: center;
     display: inline-block;
     transition: ease-in all 0.5s;
     font-weight: 500;
}

.read_more2:hover {
     background: #000;
     border-radius: 10px;
     color: #fff;
     transition: ease-in all 0.5s;
}

/** end about **/

.missionvision {
     padding: 10px 0;
}

.missionvision img {
     border-radius: 100%;
}

.missionvision .col-lg {
     margin-left: 20px;
}

.missionvision .missionvisiontitle1 p {
     font-weight: 600;
     font-size: 16px;
     margin-left: 10px;
}

.missionvision .missionvisiontitle2 p {
     font-weight: 600;
     font-size: 16px;
     margin-left: 10px;
}

.missionvision .missionvisiontitle1 h2 {
     font-size: 40px;
     margin-top: 50px;
}

.missionvision .missionvisiontitle2 h2 {
     font-size: 40px;
     margin-top: 10px;
}


/*--------------------------------------------------------------
# What We Do
--------------------------------------------------------------*/
.what-we-do .icon-box {
     text-align: center;
     padding: 30px 20px;
     transition: all ease-in-out 0.3s;
     background: #fff;
     margin: 10px 0;
     box-shadow: 0px 0 45px 0 rgba(0, 0, 0, 0.1);
}

.what-we-do .icon-box .icon {
     margin: 0 auto;
     width: 64px;
     height: 64px;
     background: #d2e8f8;
     border-radius: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
     transition: ease-in-out 0.3s;
}

.what-we-do .icon-box .icon i {
     color: #0C5C9F;
     font-size: 28px;
}

.what-we-do .icon-box h4 {
     font-weight: 800;
     font-size: 24px;
}

.what-we-do .icon-box h5 {
     font-weight: 700;
     font-size: 22px;
}

.what-we-do .icon-box span {
     margin-bottom: 15px;
     font-size: 18px;
}

.what-we-do .icon-box h4 a {
     color: #384046;
     transition: ease-in-out 0.3s;
     text-transform: uppercase;
}

.what-we-do .icon-box h5 a {
     color: #384046;
     transition: ease-in-out 0.3s;
     text-transform: uppercase;
}

.what-we-do .icon-box p {
     line-height: 24px;
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 0;
}

.what-we-do .icon-box:hover {
     border-color: #fff;
     box-shadow: 0px 0 45px 0 rgba(0, 0, 0, 0.3);
}

.what-we-do .icon-box:hover h4 a,
.what-we-do .icon-box:hover .icon i {
     color: #0C5C9F;
}

.what-we-do .icon-box:hover h5 a,
.what-we-do .icon-box:hover .icon i {
     color: #0C5C9F;
}


.section-title2 {
     text-align: center;
     margin-top: 30px;
     padding-bottom: 20px;
}

.section-title2 h2 {
     font-size: 32px;
     font-weight: 600;
     margin-bottom: 20px;
     /* font-family: Tahoma, Geneva, sans-serif; */
     padding-bottom: 20px;
     position: relative;
     color: #fff;
}

.section-title2 h2::before {
     content: "";
     position: absolute;
     display: block;
     width: 120px;
     height: 1px;
     background: #ddd;
     bottom: 1px;
     left: calc(50% - 60px);
}

.section-title2 h2::after {
     content: "";
     position: absolute;
     display: block;
     width: 40px;
     height: 3px;
     background: #0C5C9F;
     bottom: 0;
     left: calc(50% - 20px);
}

.section-title2 p {
     margin-bottom: 0;
}


.section-title3 {
     text-align: center;
     margin-top: 15px;
     /* padding-bottom:px; */
}

.section-title3 h2 {
     font-size: 32px;
     font-weight: 600;
     margin-bottom: 20px;
     padding-bottom: 20px;
     position: relative;
     color: #fff;
}

.section-title3 h2::before {
     content: "";
     position: absolute;
     display: block;
     width: 120px;
     height: 1px;
     background: #ddd;
     bottom: 1px;
     left: calc(50% - 60px);
}

.section-title3 h2::after {
     content: "";
     position: absolute;
     display: block;
     width: 40px;
     height: 3px;
     background: #fff;
     bottom: 0;
     left: calc(50% - 20px);
}

.section-title3 p {
     margin-bottom: 0;
}

/* cards */

.product-list img {
     height: 100%;
     width: 100%;
     object-fit: cover;
     /* filter: grayscale(70%); */
     border-radius: 7px;
}


.img {
     height: 70%;
     width: 100%;
}

.img6 {
     height: 80%;
     width: 100%;
}

.img7 {
     height: 100%;
     width: 100%;
}


h3 {
     color: #0C5C9F;
     font-weight: 500;
}

.card-text {
     font-style: italic;
     color: #000;
}

/* button {
     display: inline-block;
     width: auto;
     color: #0C5C9F;
     padding: 0.6rem 1.5rem;
     border: 1px solid #0C5C9F;
     background: none;
     font-weight: 400;
     border-radius: 50px;
     cursor: pointer;
 } */

.container2 {
     margin: 0 auto 50px auto;
     width: 90%;
}

.input {
     display: flex;
     justify-content: center;
     margin-block: 20px 50px;
}

.product-list {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 20px;

}

/* .product-list:has(.product:hover) .product:not(:hover) {
     filter: blur(5px);
     opacity: 0.7;
 } */

.product {
     background-color: #fff;
     border: 1px solid #0C5C9F;
     height: 350px;
     padding: 10px 10px 20px 10px;
     border-radius: 10px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
     transition: filter 0.1s ease-in-out, opacity 0.1s ease-in-out;
}

.info {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;

}


.product-bottom-details {
     overflow: hidden;
     border-top: 1px solid #0C5C9F;
     width: 100%;
     padding-top: 5px;
}

.product-bottom-details div {
     float: left;
     width: 50%;
}

.product-price {
     font-size: 18px;
     color: #0C5C9F;
     font-weight: 600;
}

.product-price small {
     font-size: 80%;
     font-weight: 400;
     text-decoration: line-through;
     display: inline-block;
     margin-right: 5px;
}

.product-links {
     text-align: right;
}

.product-links a {
     display: inline-block;
     margin-left: 5px;
     color: #0C5C9F;
     transition: 0.3s;
     font-size: 17px;
}

.product-links a:hover {
     color: #374F8C;
}


/* contact */

#contact {
     margin-top: 3%;
}

.contactmain {
     padding: 50px 35px;
}

.contact-info {
     display: inline-block;
     width: 100%;
     text-align: center;
     margin-bottom: 20px;
}

.contact-info-icon {
     margin-bottom: 15px;
}

.contact-info-item {
     background: #045A9A;
     /* background: linear-gradient(90deg, rgba(4, 90, 154, 1) 40%, rgba(143, 217, 250, 1) 100%); */
     height: 40vh;
     padding: 30px 5px;
     border-radius: 10% !important;
}

.contact-page-sec h2 {
     color: #0C5C9F;
     text-transform: capitalize;
     font-size: 32px;
     font-weight: 700;
     width: 26%;
     margin: 0px auto;
}

.contact-page-sec .contact-page-form h2 {
     color: #0C5C9F;
     text-transform: capitalize;
     font-size: 22px;
     font-weight: 700;
}

.contact-page-form {
     margin-top: 0px;
}

.contact-page-form .col-md-6.col-sm-6.col-xs-12 {
     padding-left: 0;
}

.contact-page-form.contact-form input {
     margin-bottom: 5px;
}

.contact-page-form.contact-form textarea {
     height: 110px;
}

.contact-page-form.contact-form input[type="submit"] {
     background: #071c34;
     width: 150px;
     border-color: #071c34;
}

.contact-info-icon i {
     font-size: 48px;
     color: #fff;
}

.contact-info-text p {
     margin-bottom: 0px;
}

.contact-info-text h2 {
     color: #fff;
     font-size: 22px;
     text-transform: capitalize;
     font-weight: 600;
     margin-bottom: 10px;

     width: 100%;
}

.contact-info-text span {
     color: #fff;
     /* font-family: Tahoma, Geneva, sans-serif; */
     font-size: 14px;
     display: inline-block;
     width: 100%;
}

.contact-info-text span a {
     color: #fff;
     /* font-family: Tahoma, Geneva, sans-serif; */
     font-size: 14px;
     text-decoration: none;
     display: inline-block;
     width: 100%;
}

.contact-info-text .cont_phone {
     color: #fff;
}

.contact-info-text .cont_phone a {
     color: #fff;
     font-size: 14px;
     text-decoration: none;
     /* display: inline-block; */
     width: 100%;
}

.contact-page-form input {
     background: #f9f9f9;
     border: 1px solid #0C5C9F;
     margin-bottom: 20px;
     padding: 12px 16px;
     width: 99%;
     border-radius: 4px;
}

.contact-page-form .message-input {
     /* display: inline-block; */
     /* width: 95px; */
     /* border: 1px solid #0C5C9F; */
     /* padding-left: 0; */
}

.single-input-field textarea {
     background: #f9f9f9 none repeat scroll 0 0;
     border: 1px solid #0C5C9F;
     width: 99%;
     height: 120px;
     padding: 12px 16px;
     border-radius: 4px;
}

.single-input-fieldsbtn input[type="submit"] {
     background: #0C5C9F none repeat scroll 0 0;
     color: #fff;
     display: inline-block;
     font-weight: 600;
     padding: 10px 0;
     text-transform: capitalize;
     width: 150px;
     margin-top: 20px;
     font-size: 16px;
}

.single-input-fieldsbtn input[type="submit"]:hover {
     background: #071c34;
     transition: all 0.4s ease-in-out 0s;
     border-color: #071c34
}

.single-input-field h4 {
     color: #464646;
     text-transform: capitalize;
     font-size: 14px;
}

.contact-page-form {
     display: inline-block;
     width: 100%;
     margin-top: 30px;
}

.contact-page-map {
     margin-top: 36px;
}

.contact-page-form form {
     padding: 20px 15px 0;
}

/* banner */

.jumbotron {
     background: url('../images/banner.jpg');
     background-size: cover;
     color: grey;
     height: 85vh;
     width: 100%;
     padding-bottom: 0px !important;
     margin-bottom: 0px !important;
     overflow-y: hidden;
}

.banner {
     background: url('../images/banner.jpg');
     background-size: cover;
     background-attachment: fixed;

}

.btn-group {
     margin-top: 16%;
}

/* hr{
     border: dotted white 6px;
     border-bottom:none;
} */

.text-img .hr1 img {
     height: 200px;
     width: 20%;
     /* margin-bottom: -0px; */
     rotate: 35deg;
     margin-left: 20%;
}

.text-img .hr2 img {
     height: 200px;
     width: 20%;
     margin-left: 20%;
     margin-top: -3%;
     rotate: -220deg;
}

.text-img .hr3 img {
     height: 200px;
     width: 70%;
     margin-top: -20px;
     rotate: -90deg;
}

.missionvision {
     background-color: #23262D;
     padding: 60px 0;
     margin-top: 10px;
}

.containers {
     position: relative;
     margin: 0 10%;
     margin-left: 20%;

}

.servicescontainer {
     position: relative;
     margin: 0 10px;
     /* width:100%; */
     /* margin-left: 20%; */
}

.maincard {
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
}

.containers .card {
     position: relative;
     width: 300px;
     height: 450px;
     background: #fff;
     border-radius: 20px;
     margin: 0px 10px;
     overflow: hidden;
}

.servicescontainer .card {
     position: relative;
     width: 32%;
     height: 450px;
     background: #fff;
     border-radius: 20px;
     overflow: hidden;
     margin: 10px 8px;
}



.containers .card:before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #045A9A;
     background: linear-gradient(90deg, rgba(4, 90, 154, 1) 60%, rgba(143, 217, 250, 1) 140%);
     clip-path: circle(150px at 80% 20%);
     transition: 0.5s ease-in-out;
}

.servicescontainer .card:before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #045A9A;
     background: linear-gradient(90deg, rgba(50, 52, 113, 1)60%, rgba(143, 217, 250, 1) 140%);
     clip-path: circle(120px at 80% 20%);
     transition: 0.5s ease-in-out;
}

.containers .card:hover:before {
     clip-path: circle(350px at 80% -20%);
}

.servicescontainer .card:hover:before {
     clip-path: circle(280px at 70% -20%);
}

.containers .card:after {
     content: "";
     position: absolute;
     top: 30%;
     left: -20%;
     font-size: 12em;
     font-weight: 800;
     font-style: italic;
     color: rgba(255, 255, 255, 0.04);

}

.containers .card .imgBx {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 1000;
     width: 100%;
     height: 100%;
     transition: .5s;

}

.servicescontainer .card .imgBx {
     position: absolute;
     top: 10%;
     transform: translateY(-50%);
     z-index: 1000;
     width: 100%;
     height: 100%;
     transition: .5s;
}

.servicescontainer .card .imgBx .icon {
     margin: 0 auto;
     width: 64px;
     height: 64px;
     background: #d2e8f8;
     border-radius: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
     transition: ease-in-out 0.3s;
}

.containers .card:hover .imgBx {
     top: 0%;
     transform: translateY(-25%);
     /* bug  */
}

.servicescontainer .card:hover .imgBx {
     top: 0%;
     transform: translateY(-55%);
     /* bug  */
}

.containers .card .imgBx .icon {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 150px;
     /* background-size: auto; */
}

.servicescontainer .card .imgBx .icon {
     position: absolute;
     top: 80%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100px;
     height: 100px;
     background: #d2e8f8;
     border-radius: 50px;
     /* background-size: auto; */
}

.containers .card .contentBx {
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 100px;
     text-align: center;
     transition: 1s;
     z-index: 90;
}

.servicescontainer .card .contentBx {
     position: absolute;
     bottom: 0;
     width: 90%;
     height: 150px;
     text-align: center;
     transition: 1s;
     z-index: 90;
     margin: 0px 20px;
}

.containers .card:hover .contentBx {
     height: 210px;
}

.servicescontainer .card:hover .contentBx {
     height: 250px;
}

.containers .card .contentBx h2 {
     position: relative;
     font-weight: 600;
     letter-spacing: 1px;
     color: #000;
     margin-top: 20px;
}

.servicescontainer .card .contentBx h2 {
     position: relative;
     font-weight: 600;
     letter-spacing: 1px;
     color: #000;
     margin-bottom: -10px;

}

.containers .card .contentBx .size {
     display: flex;
     justify-content: left;
     align-items: left;
     transition: .5s;
     opacity: 0;
     visibility: hidden;
}

.servicescontainer .card .contentBx .size {
     display: flex;
     justify-content: center;
     align-items: center;
     /* padding: 2px 20px; */
     transition: .5s;
     opacity: 0;
     visibility: hidden;
}

.containers .card:hover .contentBx .size {
     opacity: 1;
     visibility: visible;
     transition-delay: .5s;
}

.servicescontainer .card:hover .contentBx .size {
     opacity: 1;
     visibility: visible;
     transition-delay: .5s;
}


.containers .card .contentBx .size span {
     width: 100%;
     height: 26px;
     text-align: center;
     line-height: 26px;
     font-size: 14px;
     
     display: inline-block;
     color: #111;
     background: #fff;
     margin: 0 5px;
     transition: .5s;
     border-radius: 4px;
     cursor: pointer;
}


.servicescontainer .card .contentBx .size span {
     width: 100%;
     height: 26px;
     text-align: center;
     line-height: 26px;
     font-size: 14px;
     transform: scale(1, 0.8);
     display: inline-block;
     color: #111;
     background: #fff;
     margin: 0 5px;
     transition: .5s;
     border-radius: 4px;
     cursor: pointer;
}

.text-bg h1 {
     font-size: 5em;
     text-transform: uppercase;
     font-weight: 900;
     /* font-family: "Century Gothic"; */
     /* -webkit-text-stroke: 2px #E2FADB; */
     color: #0C5C9F;
     position: relative;
     width: fit-content;
     padding-right: 10px;
}


/* .text-bg h1:after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     width: 100%;
     height: 100%;
     background: #fff;
     top: -10px;
     opacity: 1;
 }
  .text-bg h1:after {
     width: 10%;
     height: 4px;
     animation: titleCover 2.5s 1;
     opacity: 0;
 }
 
  @keyframes titleCover {
      0% {
         left: 0;
         right: 0;
         width: 100%;
         height: 100%;
        opacity: 1;
     }
    20% {
         left: 0;
         right: 0;
         width: 100%;
         height: 100%;
        opacity: 1;
     }
    30% {
         left: 0;
         right: 0;
         width: 100%;
         height: 100%;
         opacity: 1;
     }
     55% {
         left: 0;
         right: 0;
         width: 100%;
         height: 5px;
         opacity: 1;
     }
    95% {
         left: 0;
         right: 0;
         width: 10%;
     }
      100% {
         left: 0;
         right: 0;
         width: 10%;
         opacity: 0.5;
     }
 } */

#sales {
     margin-top: 0px;
}
#services {
     margin-top: 0px;
}

@media (max-width: 600px) {
     #sales {
          margin-top: 10px;
     }
     #services {
          margin-top: 10px;
     }

     .containers .card {
          position: relative;
          width: 300px;
          height: 450px;
          background: #fff;
          border-radius: 20px;
          margin: 10px 10px;
          overflow: hidden;
     }

     .servicescontainer .card {
          position: relative;
          width: 100%;
          height: 520px;
          background: #fff;
          border-radius: 20px;
          overflow: hidden;
          margin: 10px 8px;
     }

     .servicescontainer .card .contentBx h2 {
          position: relative;
          font-weight: 600;
          letter-spacing: 1px;
          color: #000;
          margin-top: -70px;

     }

     .text-bg h1 {
          font-size: 4em;
          text-transform: uppercase;
          font-weight: 900;
          /* font-family: "Century Gothic"; */
          /* -webkit-text-stroke: 2px #E2FADB; */
          color: #0C5C9F;
          position: relative;
          width: fit-content;
          padding-right: 10px;
     }

     .containers .card .imgBx {
          width: 35%;
          position: absolute;
          top: 45%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100px;
          height: 100px;
          background: #d2e8f8;
          border-radius: 50px;
          /* background-size: auto; */
     }


     .containers .card .imgBx .icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 150px;
          padding: 8px;
          /* background-size: auto; */
     }


     .containers .card:hover .imgBx {
          top: 15%;
          transform: translateY(-85%);
          transform: translateX(-50%);
          /* bug  */
     }

     .containers {
          position: relative;
          /* margin: 0 10%; */
          margin-left: 16%;

     }

}

/* about banner */

.carousel-inner {
     margin-top: 0%;
}

.carousel-caption {
     position: absolute;
     /* width: 100%; */
     right: 0%;
     bottom: 45%;
     left: 55%;
     /* padding-top: 1.25rem;
     padding-bottom: 1.25rem; */
     color: #fff;
     text-align: center;
}

.overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     /* Adjust the last value (0.5) to change the transparency */
}

.carousel-caption h2 {
     color: #fff;
     font-size: 60px;
     font-weight: 900;
}

.maindiagram {
     /* margin: -10% 60%; */
     margin-left: 45%;
     display: block;
     margin-top: -10%;
}

.maindiagram .image1 .hardware {
     width: 150px;
     height: 150px;
     border-radius: 100%;
}

.image2 {
     margin-left: -60%;
     margin-top: 25%;
     justify-content: space-between;
}

.maindiagram .image2 .innerimage1 .network {
     width: 150px;
     height: 150px;
     border-radius: 100%;
}

.maindiagram .image2 .innerimage2 .security {
     width: 150px;
     height: 150px;
     border-radius: 100%;
}

.maindiagram .arrow {
     display: flex;
     margin-left: -49%;
     margin-top: -30%;
}

.maindiagram .arrow .arrowleft {
     rotate: 129deg;
     margin-bottom: -23%;
     margin-left: 2%;
}

.maindiagram .arrow .arrowleft .left {
     height: 190px;
}

.maindiagram .arrow .arrowright {
     margin-left: 18%;
     rotate: 48deg;
     margin-bottom: -20%;
     margin-top: 11%;

}

.maindiagram .arrow .arrowright .right {
     height: 190px
}

.maindiagram .image2 .arrowbottom {
     margin-top: -38%;
     width: 48%;
     margin-left: 42%;
}

@media (max-width:600px) {
     .carousel-inner {
          margin-top: 2%;
     }

     .carousel-caption {
          position: absolute;
          /* width: 100%; */
          right: 0%;
          bottom: 50%;
          top: 30%;
          left: 55%;
          /* padding-top: 1.25rem;
          padding-bottom: 1.25rem; */
          color: #fff;
          text-align: center;
     }

     .carousel-caption h2 {
          color: #fff;
          font-size: 20px;
          font-weight: 900;
     }

     .maindiagram {
          margin-top: 30px;
     }

     .maindiagram .image1 {
          margin-left: -20%;
     }

     .maindiagram .image1 .hardware {
          width: 90px;
          height: 90px;
     }

     .maindiagram .image2 .innerimage1 {
          margin-left: -20%;
     }

     .maindiagram .image2 .innerimage1 .network {
          width: 90px;
          height: 90px;
     }

     .maindiagram .image2 .innerimage2 .security {
          width: 220px;
          margin-left: 30%;
          height: 90px;
     }

     .maindiagram .arrow {
          display: flex;
          margin-left: -67%;
          margin-top: -29%;
          margin-bottom: -10%;
     }

     .maindiagram .arrow .arrowleft {
          rotate: 120deg;
          margin-top: 10%;
          margin-bottom: -13%;
          margin-left: -5%;
     }

     .maindiagram .arrow .arrowleft .left {
          height: 130px;
     }

     .maindiagram .arrow .arrowright {
          margin-left: -2%;
          rotate: 58deg;
          margin-bottom: -20%;
          margin-top: 7%;

     }

     .maindiagram .arrow .arrowright .right {
          height: 130px
     }

     .maindiagram .image2 .arrowbottom {
          margin-top: -55%;
          width: 70%;
          margin-left: 46%;
     }
}

.maincontactcard {
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
}

.contactcard {
     width: 23%;
     margin: 0px 12px;
}

.structure {
     display: none;
}

.mainstructure {
     display: block;
     margin-left: 60px;
     margin-top: -100px;
}

@media (max-width:600px) {
     .contactcard {
          width: 100%;
          margin: 0px 10px;
     }

     .contact-page-form {
          margin-top: 50%;
     }

     .contact-page-sec h2 {
          color: #0C5C9F;
          text-transform: capitalize;
          font-size: 22px;
          font-weight: 700;
          width: 70%;
          margin: 0px auto;
     }

     .contactmain {
          padding: 25px 35px;
     }


     #contact {
          margin-top: 7%;
     }

     .mainstructure {
          display: none;
     }

     .structure {
          display: block;
     }
}

.contact .php-email-form .validate {
     display: none;
     color: red;
     margin: 0 0 15px 0;
     font-weight: 400;
     font-size: 13px;
   }
   
   .contact .php-email-form .error-message {
     display: none;
     color: #fff;
     background: #ed3c0d;
     text-align: left;
     padding: 15px;
     font-weight: 600;
   }
   
   .contact .php-email-form .error-message br+br {
     margin-top: 25px;
   }
   
   .contact .php-email-form .sent-message {
     display: none;
     color: #fff;
     background: #18d26e;
     text-align: center;
     padding: 15px;
     font-weight: 600;
   }
   
   .contact .php-email-form .loading {
     display: none;
     background: #fff;
     text-align: center;
     padding: 15px;
   }
   
   .contact .php-email-form .loading:before {
     content: "";
     display: inline-block;
     border-radius: 50%;
     width: 24px;
     height: 24px;
     margin: 0 10px -6px 0;
     border: 3px solid #18d26e;
     border-top-color: #eee;
     -webkit-animation: animate-loading 1s linear infinite;
     animation: animate-loading 1s linear infinite;
   }
   
   .contact .php-email-form input,
   .contact .php-email-form textarea {
     border-radius: 0;
     box-shadow: none;
     font-size: 14px;
   }
   
   .contact .php-email-form input[type="submit"] {
   
     border: 0;
     padding: 10px 24px;
     color: #fff;
     transition: 0.4s;
     border-radius: 50px;
   }
   
   .contact .php-email-form input[type="submit"]:hover {
     background: #2383c4;
   }
   
   @-webkit-keyframes animate-loading {
     0% {
       transform: rotate(0deg);
     }
   
     100% {
       transform: rotate(360deg);
     }
   }
   
   @keyframes animate-loading {
     0% {
       transform: rotate(0deg);
     }
   
     100% {
       transform: rotate(360deg);
     }
   }