/* TABLE OF CONTENTS */
/*--------------------
1. General
2.Navbar
3.Banner
4.About
7.Products
9.contact
---------------------*/
/* 1 General*/

@import url("https://fonts.googleapis.com/css?family=josefin+Sans:wght@100;200;300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto+Slab:wght@100;200;300;400;500;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css?family=Yantramanav:100,300");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Rubik:wght@400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Corinthia:wght@400;700&family=Inter:wght@300;400;500;600;700;800;900&family=Mea+Culpa&family=MonteCarlo&family=Montserrat:wght@100;200;300;400;500;600;700;800&family=Poppins:wght@200;300;400;600;800&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  overflow-x: hidden;
}

:root {
  /* Background colour */
  --primary-color: #062244;
  --secondary-color: #fc518 --bg-light-blue:#3672bc;
  --bg-dark: #666;
  --bg-white: #fff;
  background-color: #fbfdfd;
  /* best for bg color*/


  /*Text Style*/
  --primary-font: 'Roboto Slab', serif;
  --secondary-font: 'Josefin Sans', sans-serif;
  --primary-text: #03534f;
  --secondary-text: #fc5185;
  --text-black: #222;
  --text-white: #fff;
  --text-gray: #666;
  --text-light: #ddd;
}

body {
  font-family: var(--primary-font);
  background-color: pink;
  background-color: var(--bg-light-blue);
}

a {
  text-decoration: none;
}

/*for scrollbar colors*/
::-webkit-scrollbar {
  width: 0.375em;
}

::-webkit-scrollbar-track {
  background: var(--bg-light-blue);
}

::-webkit-scrollbar-thumb {
  background: var(--secondary-color);
}

/*for scrollbar colors*/
.wrapper {
  padding: 6.25rem 0;
}

.main-btn {
  display: inline-block;
  border: .0625rem solid var(--bg-white);
  color: var(--text-white);
  text-align: center;
  padding: .75rem 1.375rem;
  font-size: 1rem;
  background: transparent;
  text-transform: capitalize;
  border-radius: .1875rem;
  transition: all 0.3s ease-in-out;
}

.main-btn:hover {
  /*complete*/
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-white);
}

.fill-btn {
  /*complete*/
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--text-white);
}

.fill-btn:hover {
  /*complete*/
  background-color: var(--bg-white);
  border-color: var(--bg-white);
  color: var(--text-black)
}

h1 {
  /*complete*/
  font-size: 3.500rem;
  margin-bottom: 1.25rem;
  font-weight: 600;
  color: rgb(7, 51, 51);
  font-family: var(--secondary-font);
}

h2 {
  /*complete*/
  font-size: 2.875rem;
  font-weight: 600;
  color: var(--bg-white);
  font-family: var(--secondary-font);
}

h3 {
  /*complete*/
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--text-black);
  font-family: var(--secondary-font);
}

h4 {
  /*complete*/
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2.25rem;
  color: var(--text-black);
  font-family: var(--secondary-font);
}

h5 {
  /*complete*/
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2rem;
  color: var(--primary-text);
  margin-bottom: .9375rem;
  font-family: var(--secondary-font);
}

h6 {
  /*complete*/
  font-size: .875rem;
  font-weight: 300;
  color: var(--text-black);
  margin-bottom: .9375rem;
  text-transform: uppercase;
  font-family: var(--secondary-font);
}

p {
  /*complete*/
  font-size: 1rem;
  color: var(--text-black);
  line-height: 1.625rem;
}

p {
  font-family: Sans-Serif;
  font-size: 17px
}

/*NAVBAR ITEM */

.navbar {
  background-color: rgba(6, 75, 80, 0.205);
  padding: .9375rem;
  transition: 0.35s ease-in-out;
  margin: 0 .005rem;
}

.fas{
  font-weight: 400;
  font-size: 20px;
  border: none;
  color: rgb(12, 12, 12);
  line-height:1px;
  box-shadow:none;
}

.navbar .nav-item {
  margin: 0 .325rem;
}

/*NAVBAR LINK */
.navbar .nav-item .nav-link {
  font-size: 1.235rem;
  font-family: 'Compressa VF';
  font-weight: 400;
  color: hsl(232, 92%, 24%);
  display: inline-block;
  text-align: end;
}

.navbar .nav-item .nav-link:hover,
.navbar .nav-item .nav-link:focus {
  color: #e1294e;
}


.navbar.nav-item .nav-link:after {
  content: "";
  position: relative;
  left: 0;
  right: 0;
  width: 0;
  height: 3px;
  background: #41071b;
  transition: 0.5s;
  bottom: 0;
}

.navbar.nav-item .nav-link:hover:after {
  width: 100%;
  background: #e12768;
  transition: 0.5s;
}

.navbar-toggler.nav-item{
text-align: center;
}

/* Style the form container (flex container) */
.d-flex {
  margin-bottom: 1px;
  /* Add some bottom margin for spacing */
  margin-left: 50px;
}

/* Style the search input */
.d-flex .form-control {
  width: 200px;
  /* Set the width of the input field */
  border-radius: 5px;
  /* Add rounded corners */
  border-color: #cfc9f0;
  /* Set a border color */
}

/* Style the search button */
.d-flex.btn {
  border-radius: 5px
    /* Add rounded corners */
}

/* Style the search button in its default state */
.d-flex .btn-outline-success {
  color: #9da8e7;
  /* Text color for success button */
  border-color: #1b0985;
  /* Border color for success button */
}

/* Style the search button on hover */
.d-flex .btn-outline-success:hover {
  background-color: #1b0985;
  /* Background color on hover */
  color: #fff;
  /* Text color on hover */
}

/* Banner section */
 .banner_wrapper {
  background-color: #16222A;
  background: -webkit-linear-gradient(59deg, #010f15, #16222A);
  background: linear-gradient(59deg, #3A6073, #16222A);
  color: white;
  background-position: center center;
  height: 150%;
  margin-top: 1px;
  padding-top: 30px;
  padding-bottom: 30px;
}



#below-section {
  color: #000;
}

#small-text {
  color: white;
}

/* Banner .our aim text.. part */
.banner_wrapper h5 {
  color: #c4ecf3;
  font-family: 'Times New Roman', Times, serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 2.00;
  padding: 10px;
}

.banner_wrapper h1 {
  color: #dfedfb;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 70px;
  line-height: 1.00;
  margin-left: 8px;
  margin-bottom: 25px;
  text-align: start;
  text-shadow: 
  5px 4px 4px rgba(0, 0, 0, 0.688),  
  10px 10px 10px rgba(2, 26, 33, 0.8);  
}

/* Banner text UNLEASH part */
.banner_wrapper h2 {
  color: rgb(244, 248, 248);
  box-shadow: 1px 1px 1px #f6f6f6, 10px 10px 10px rgba(0, 9, 11, 0.8),5px 4px 4px rgba(0, 0, 0, 0.688);
  line-height: 1.50;
  border-color:#f6f6f6 ;
  font-weight:400;
  text-transform: uppercase;
  font-size: 19px;
  text-align: center;
  border-radius: 5px;
  margin-top: 15px;
}
.top-right-sec {
  border-radius:5px 50px 5px 50px;
  overflow: hidden;
  margin-left:15%;
  max-width: 400px ;
}


/* about HEADING START*/
.about_wrapper {
  padding-top:30px;
}

.about-heading {
  background: linear-gradient(to right, rgb(250, 250, 250), #f0f5f4, rgb(250, 250, 250));
  padding: 10px;
}
/*ABOUT US */
.about-heading h3 {
  color: #041414;
  font-family: 'Times New Roman', Times, serif;
  font-weight: 700;
  padding: 10px;
  font-size: 40px;
  text-align: center;
}

/*ABOUT US  welcome text.. */
.about-heading h5 {
  color: #052c38;
  font-family: 'Times New Roman', Times, serif;
  font-weight: 800;
  padding: 2px;
  font-size: 22px;
  text-align: center;
}

/*ABOUT US headind text.. */
.about-heading p {
  color: #00070c;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 400;
  padding: 5px;
  font-size: 14px;
  text-align: center;
}

/* about HEADING end */
.about.heading h2 {
  margin: 0;
  padding: 0;
}

.about p {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: #da1212;
  margin: 20px 0 15px;
  padding: 0;
}

.about h4 {
  font-size: 15px;
  font-weight: 500;
  margin: 8px 0;
}

.about h4 i {
  color: #e79ea8;
  margin-right: 10px;
}

.about-text {
  font-size: medium;
  color: #d8db25;
}

.about .content-column .text {
  text-align: justify;
}

.container.title {
  font-size: 20px;
}

/* About coulmn start*/
.about-section {
  position: relative;
  padding: 5px 0px;
}
.about-section .content-column {
  position: relative;
  margin-bottom: 20px;
}

.about-section .content-column .inner-column {
  position: relative;
  padding-top: 40px;
  padding-right: 2px;
}

.about-section .content-column .text {
  position: relative;
  color: #242222;
  font-size: 15px;
  line-height: 2em;
  margin-bottom: 35px;
  text-align: justify;
}

.sec-title {
  position: relative;
  padding-bottom: 5px;
}

/* FINAL sec title.title for vivion mission  */
.sec-title .title {
  position: relative;
  color: #2f3003;
  background-color: lightblue;
  font-size: 20px;
  font-weight: 700;
  padding-right: 50px;
  margin-bottom: 15px;
  display: inline-block;
  text-transform: capitalize;
}

/* FINAL sec title.before line for vivion mission  */
.sec-title .title:before {
  position: absolute;
  content: '';
  right: 0px;
  bottom: 7px;
  width: 40px;
  height: 16px;
  background-color: #153942;
}

/* About coulmn End*/
/* About End*/

/* PRODUCT CARD START*/
.pics-list {
  /* FINAL FOR PRODUCTS ul */
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-family: 'Courier New', Courier, monospace;
  color: #86940b;
  font-size: 30px;
  font-weight: bolder;
  margin-left: 10px;
}

.products-pics {
  /* FINAL FOR PRODUCTS PICS */
  height: 230px;
}

.products-card:hover {
  /* FINAL FOR PRODUCT CARD HOVER */
  box-shadow: 0 0 30px rgb(11, 13, 128);
  transform: matrix3d(1, 0, 0.00, 0, 0.00, 1, 0.00, 0, 0, 0, 1, 0, 0, 5, 0, 1);
  transition-duration: 250ms;
}

.products-card {
  /* FINAL FOR PRODUCT CARD OUTLINE */
  font-size: 12px;
  box-shadow: 0 0 10px rgb(233, 6, 6);
  width: 90%;
  margin: 2px;
  padding: 5px;
  border-radius: 6px;
  text-align: center;
  margin-bottom: 15px
}

.products-card p {
  /* FINAL FOR PRODUCT TEXT */
  font-size: 12px;
  font-weight: lighter;
  text-align: center;
}

.prod-style {
  /* FOR PROD TEXT UNDERLINE */
  color: #df15ce;
}

/* PRODUCT CARD END*/

/*GALLERY START */
.gallery_wrapper{
  padding-top: 1px;
}

.gallery-heading {
  background: linear-gradient(to right, rgb(250, 250, 250), #f0f5f4, rgb(250, 250, 250));
  padding: 10px;
}

.gallery-heading h3 {
  color: #041414;
  font-family: 'Times New Roman', Times, serif;
  font-weight: 700;
  padding: 10px;
  font-size: 40px;
  text-align: center;
}
.gallery-heading h5 {
  color: #052c38;
  font-family: 'Times New Roman', Times, serif;
  font-weight: 700;
  padding: 2px;
  font-size: 22px;
  text-align: center;
}

.gallery-heading p {
  color: #00070c;
  font-family: 'Times New Roman', Times, serif;
  font-weight: 700;
  padding: 5px;
  font-size: 14px;
  text-align: center;
}

.container.gallery {
  background: radial-gradient(#d9f6fd rgb(5, 150, 150));
}
.gallery {
  border: 1px solid #d9f6fd;
  padding: 2px;
  margin-bottom:-30px;
}

.gallery:hover {
  border: 1px solid #6fcaca;
}
.gallery img {
  width:100%;
  padding: 2px 2px;
  height: auto;
}

/*GALLERY END */

/*CAREER FORM START */
/* Apply styles to the career section */
.career_wrapper {
  background-color: #3a56735e; /* Background color for the section */
  padding: 30px;
  text-align: center;
}

/* Style for the heading */
.career-heading {
  margin-bottom: 20px;
}

.career-heading h3 {
  font-family: 'Times New Roman', Times, serif;
  font-weight: 700;
  font-size: 35px; 
  color: #333;
  margin-bottom: 10px;
}


.career-heading h5 {
  font-size: 18px; 
  color: #666; 
  margin-bottom: 20px;
}

.career-heading p {
  font-size: 16px;
  color: #0b0000;
  line-height: 1.5px; 
}

.info-container div:first-of-type p {
  width: 80%;
  color: #999;
}


/*CAREER FORM END */

/*CONTACT START */

.social-icons {
  padding: 0px;
  list-style: none;
  margin-left: -40px;
}
.social-icons li {
  display: inline-block;
  margin: 0.90em;
  position: relative;
  font-size: 20px;
}


.social-icons i {
  position: absolute;
  top: 0.23em;
  left: 0.23em;
  transition: all 265ms ease-out;
  font-size: 23px;
  color: #00110f;
}

.social-icons a {
  display: inline-block;
}

.social-icons a:before {
  transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  content: " ";
  width: 32px;
  height: 32px;
  border-radius: 100%;
  display: block;
  /*background: linear-gradient(45deg, #02bbc5, #030cb5);*/
  transition: all 265ms ease-out;

}

.social-icons a:hover:before {
  transform: scale(0);
  transition: all 265ms ease-in;
}

.social-icons a:hover i {
  transform: scale(1.3);
  -ms-transform: scale(1.3);
  -webkit-transform: scale(1.3);
  color: #fdfbfc;
  background: -webkit-linear-gradient(45deg, #f9f9f9, #d14070);
  background-image: linear-gradient(45deg, #ff5733, #fddb92);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-mask-image: linear-gradient(45deg, #fff 0%, #fff 100%);
  mask-image: linear-gradient(45deg, #fff 0%, #fff 100%);
  -webkit-text-fill-color: transparent;
  transition: all 265ms ease-in;
}

.contact_wrapper{
  margin: 5px;
  padding-bottom: 0;
  background-color: #16222A;
  background: -webkit-linear-gradient(59deg, #3A6073, #16222A);
  background: linear-gradient(59deg, #3A6073, #16222A);
  color: white;
}

.container.row {
  width: 85%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

.contact-info ul p {
  line-height: 1.2;
  color: #f7fafa;
}
.contact-heading h3 {
  color: #eaf1f1;
  font-family: 'Lato', sans serif;
  font-weight: 800;
  font-size: 40px;
  border-radius: 2%;
  text-align: center;
  padding: 11px 35px;
  margin-bottom: .5rem;
  margin-top: -120px;
  background-color: #16222A;
}

.contact_wrapper h5 {
  color: #eef4f6;
  font-size: 25px;
  margin-top: 40px;
}

.contact_wrapper ul li {
  margin-bottom: .5rem;
  list-style: none;
  font-size: .875rem;
}

.contact_wrapper ul li a {
  color: #000;
}

.contact_wrapper ul li a,
.contact_wrapper p {
  color: #f9f4f4;
  font-size: .875rem;
  padding: left 1.5rem;
  position: relative;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  text-decoration: none;
}

.contact_wrapperr ul li a::before {
  content: '\f105';
  font-family: 'font awesome 5 free';
  font-weight: 600;
  position: absolute;
  left: -.80rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.contact_wrapper .social-network ul {
  margin-left: 0px;
}

.contact_wrapper ::placeholder {
  color: #000;
}

.contact_wrapper .form-control {
  color: #000;
}

.contact_wrapper .form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: #e14848;
}

/* copyright padding */
.container-fluid.copyright-section {
  background-color: #16222A;
  padding: 15px 0;
  text-align: center;
}

.container-fluid.copyright-section p {
  margin: 0;
  color: #fcf9f9;
}

.container-fluid.copyright-section a {
  color: #f3f5f7;
  font-weight: 300;
  text-decoration: none;
}

.container-fluid.copyright-section a:hover {
  text-decoration: underline;
  color: #d85550;
}

.main-btn {
  padding: 8px 20px;
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #0c0000;
  background-color: white;
  color: #0e0d0d;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.main-btn:hover {
  background-color: #c2faf3;
  color: #fff;
  border-color: #000;
}
/*CONTACT END */

/* BACK TO TOP*/
/* Style for the "back to top" button */
.back-to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #007bff;
  color: #fff;
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  cursor: pointer;
}
.back-to-top:hover {
  background-color: #0056b3;
}