/*---------------

COLOR : #74c209;

--------------*/


.swal2-container {
  z-index: 10000 !important;
}

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

*:focus {
	outline: 0 !important;
}


@font-face {
	font-family: epilogue-semibold;
	src: url(../fonts/Epilogue-SemiBold.ttf);
}

@font-face {
	font-family: epilogue-medium;
	src: url(../fonts/Epilogue-Medium.ttf);
}


@font-face {
	font-family: epilogue-regular;
	src: url(../fonts/Epilogue-Regular.ttf);
}

@font-face {
	font-family: cera-pro-medium;
	src: url(../fonts/cera_pro_medium.otf);
}


@font-face {
	font-family: caros-regular;
	src: url(../fonts/caros-regular.otf);
}



html, 
body {
	font-family: 'caros-regular', serif;
	scroll-behavior: smooth;
	margin: 0!important;
	padding: 0!important;
  width: 100%;
}

body{
	overflow-x: hidden;
}

a{
	text-decoration: none !important;
	cursor: pointer;
}


.top-border{
	padding: 0.3rem;
	 background-image: linear-gradient(to right, #343434 , #343434);
}


.navbar{
	padding: 2.7rem 10rem 2rem 9rem;
	background-color: #ffffff !important;
}


.navbar ul{
	padding-left: 6rem;
}

.navbar ul li a{
	font-size: 1rem;
	margin-right: 2rem;
	color: #172d48 !important;
	font-weight: 600;
}

.navbar .nav-sign-in{
	border: none;
  color: #172d48;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.8rem 2rem;

}

.navbar .nav-sign-in:hover{
  background-color: transparent;
}

.navbar .nav-log-in{
  color: #172d48;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.8rem 4rem;
  border: 2px solid #212020;
  border-radius: 8px;
}

.navbar .nav-log-in:hover{
	background-color: #212020;
	transition: 0.5s;
	color: #ffffff;
	border: 2px solid transparent;
}

.navbar .nav-logo{
	width: 12rem;
	height: auto;

}




#who-we-are{                                       /*---CSS Starts---*/
	background-color: #eff9fd;
	padding: 4rem 1rem 20rem 1rem;
	background-image: url("../images/background/quresoft-building.jpg"); /* The image used */
  background-color: #0090f9; /* Used if the image is unavailable */
  width: 100%;
  min-height: 93vh;
  height: auto; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */

  text-align: center !important;
}


#who-we-are h2{
	font-size: 1.4rem;
	font-weight: 300;
	color: #747474 !important;
}


#who-we-are h1{
	font-size: 4.5rem;
	font-weight: 600;
}

#who-we-are p{
	font-family: 'caros-regular', serif;
  font-size: 1rem;
  line-height: 1.2rem;
  color: #5c728d;
}
.topText{
  margin-bottom:100px!important;
}

.learn-more{
	background-color: transparent;
	border: 1px solid #212020;
	border-radius: 8px;
	color: #172d48;
	font-size: 1rem;
	font-weight: 600;
	padding: 0.8rem 2rem;
  margin-bottom: 50px;
}

#our-products .col-md-6{
	padding: 0rem 4rem;
	position: relative;
}


#our-products .col-md-6 input{
 padding: 2.2rem 1rem !important;
 border: none !important;
 border-radius: 12px !important;
 box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

#our-products .submit-btn{
	border: none;
 position: absolute !important;
 top: 5%;
 right: 10%;
 padding: 0.8rem 3rem;
 font-size: 1.2rem;
 font-weight: 500;
 border-radius: 8px;
 background-image: linear-gradient(to right, #000000 , #404040);
}


::placeholder {
  color: #212020 !important;
  font-size: 1rem !important;
  opacity: 1; 
}

:-ms-input-placeholder { 
  color: #212020 !important;
  font-size: 1rem !important;
}

::-ms-input-placeholder { 
  color: #212020 !important;
  font-size: 1rem !important;                             /*---CSS Ends----*/
}






#our-products{                                     /*---CSS Starts----*/
		padding: 5rem 10rem 5rem 10rem;       
		background-color: #ffffff !important;
		height: auto;
}

#our-products h2{
	font-size: 1.4rem;
	font-weight: 300;
	color: #212020 !important;
}


#our-products h1{
	font-size: 4.5rem;
	font-weight: 600;
}

#our-products p{
	font-family: 'caros-regular', serif;
  font-size: 0.9rem;
  line-height: 1.2rem;
  color: #5c728d;
}


.product-outer{
	border: 4px solid transparent;
	padding: 3rem;
	border-radius: 8px;
	box-shadow: rgba(210, 234, 247, 1) 0px 7px 29px 0px;
}

.product-outer:hover{
	transition: 0.5s;
	border: 4px solid #2c5fb0;
	cursor: pointer;
}

.product-outer h3{
	font-size: 1.8rem;
	font-weight: 600;
}

.explore-btn{
	background-color: transparent;
	border: 2px solid #2a99d6;
	border-radius: 10px;
	padding: 0.8rem 3rem;
	color: #000000;
	font-size: 1.2rem;
	font-weight: 700;
}

.product-outer .col-md-5{
	border-radius: 10px;
	background-color: #f9fdfe;
	padding: 0.5rem;
}


.product-outer .product-img{
	width: 10rem;
	margin-left: 2rem;
}                                          /*---CSS Ends----*/
                    


#our-vision{																																/*---CSS Starts----*/
	padding: 8rem 14rem 12rem 14rem;   
	background-image: url("../images/background/our-vision-bg.jpg"); /* The image used */
  background-color: #ffffff; /* Used if the image is unavailable */
  width: 100%;
  height: auto; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

#our-vision h2{
	font-size: 4.5rem;
	font-weight: 600;
	color: #ffffff;
}


#our-vision p{
	font-family: 'caros-regular', serif;
	font-size: 1rem;
	color: #ffffff;
	opacity: 0.8;
	width: 80%;
	line-height: 1.2rem;
}


.our-vision-img{
	width: 40rem;
	height: auto;
	position: absolute;
	top: -48%;                             /*---CSS Ends----*/
}






#project-overview{                                     /*---CSS Starts----*/
		padding: 10rem 14rem 10rem 14rem;       
}

#project-overview h2{
	font-size: 1.4rem;
	font-weight: 300;
	color: #212020 !important;
}


#project-overview h1{
	font-size: 4.5rem;
	font-weight: 600;
}

#project-overview p{
	font-family: 'caros-regular', serif;
  font-size: 1rem;
  line-height: 1.2rem;
  color: #5c728d;
}

#project-overview .nav-item{
 width: 33.33%;
 border: none !important;
 text-align: center;
 padding: 1.5rem;
}

#project-overview .nav-item a{
 border: none !important;
 border-bottom: 3px solid #d4e8f6 !important;
 font-size: 1.8rem;
 font-weight: 500;
 color: #acb5c2;
 line-height: 2.2rem;
 padding: 2rem 0rem;
}

#project-overview .nav-item .active{
 border-bottom: 3px solid #2a91d1 !important;
  font-weight: 600;
  color: #172d48;
}


#myTabContent{
	padding: 3rem 3rem;
}

#myTabContent p{
	font-family: 'caros-regular', serif;
 font-size: 1rem;
}

#myTabContent span{
  font-weight: 600;
  color: #29a5de;
}

.blank-div{
	width: 95%;
	min-height: 10rem;
	border-radius: 10px;
	height: auto;
	margin: 0 auto;
	background-color: #e6f2fa;
}                                                                   /*---CSS Ends---*/
 









#project-overview-slider{                           /*---CSS start*/
    padding-bottom: 5rem;
}


    #overview-slider .item{
    background-color: #f6f6f6;
    padding: 1.5rem;
    border-radius: 10px;
    }

    #overview-slider .item img{
     width: 100%;
     height: auto;
     max-height: 15rem;
     object-fit: contain;
     margin-bottom: 2rem;
    }

    #overview-slider .item h2{
     font-size: 1.4rem;
    }

    #overview-slider .item p{
     font-size: 0.8rem;
     color: #747474;
     display: none;
    }

    #overview-slider .center p{
        display: block !important;
    }

    #project-overview-slider .my-previous-button{
        position: absolute;
        top: 65%;
        left: 35%;
        z-index: 9000;
        border: none;
        background-color: transparent;

    }

    #project-overview-slider .my-previous-button img{
        width: 3rem;
    }

    #project-overview-slider .my-next-button{
        position: absolute;
        top: 65%;
        right: 35%;
        z-index: 9000;
        border: none;
        background-color: transparent;

    }

    #project-overview-slider .my-next-button img{
        width: 3rem;
    }
                                                  /*---CSS Ends*/










 #contact-us{                                      /*---CSS Starts--*/
 	background-color: #f6f6f6;
 	padding: 6rem 12rem 6rem 12rem;
 }


.white-line{
	width: 100%;
	background-color: #ffffff;
	padding: 0.3rem;
	margin-top: 2rem;
}


#contact-us h2{
	font-size: 4.5rem;
	font-weight: 600;
}


#contact-us p{
	font-family: 'caros-regular', serif;
	font-size: 1rem;
  line-height: 1.1rem;
  color: #5c728d;
  margin-top: 1rem;
}

#contact-us a{
	font-family: 'caros-regular', serif;
	font-size: 2rem;
  line-height: 1.1rem;
  color: #000000;
}

                                                  /*---CSS Ends--*/







footer{
	background-color: #000000;
	padding: 4rem 1rem;
	background-image: url("../images/background/footer-bg.jpg"); /* The image used */
  background-color: #0090f9; /* Used if the image is unavailable */
  width: 100%;
  height: auto; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

footer .footer-links{
	font-size: 0.9rem;
	margin-right: 1.5rem;
	color: #ffffff;
}


.footer-bottom{
	padding: 1rem 1rem 0rem 1rem;
		background-color: #dedede;
}

.footer-bottom p,a{
	font-family: 'caros-regular', serif;
	font-size: 0.8rem;
	color: #000000;

}

.footer-bottom-link{
	font-size: 0.8rem;
	color: #000000;
}

.footer-icon{
	width: 1.8rem;
	height: auto;
	margin-right: 0.5rem;
}



.footer-logo{
	width: 12rem;
	height: auto;
}




/*start css*/
.top-f{
  margin-top: 50px;
}

.left-content img{
  padding-top:50px;
}
.content-container {                                    
  display: flex;
  background-color: #000000 !important;
  padding: 8rem 2rem 20vh 3rem;
  background-image: url("./assets/images/background/product-bg.jpg"); /* The image used */
  background-color: #0090f9; /* Used if the image is unavailable */
  width: 100%;
  height: auto; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.content-container  p, li {
  max-width: 800px;
}



.content-container > * {
  flex-basis: 100%;
}

.left-con {
  height: 100vh;
  position: relative;
}

.left-con img{
  width: 50%;
  margin-top: -8%;
  border-radius: 20px;
}

img#img1 {
  height: 500px;
}

.left-con > * {
  position: absolute;
  left: 50%;
  top: 50%;
}


.right-content {
  padding-right: 15px;
}

.right-content .product-icon{
  width: 4rem;
  height: auto;
}

.right-content h2{
    font-family: 'caros-regular', serif;
    font-weight: 600;
    line-height: 3rem;
    font-size: 3rem;
    color: #ffffff;
    margin-top: 6vh;
}

.right-content p{
   font-family: 'caros-regular', serif;
   font-size: 1rem;
   margin-top: 4vh;
   color: #747474;
}

.right-content a{
    color: #ffffff;
    font-family: 'caros-regular', serif;
    font-size: 1.2rem;
    font-weight: 600;
}

.right-content .height-padding{
    padding-top: 5vh;
    padding-bottom: 35vh;
}

.right-content .height-padding-top{
   padding-top: 0vh;
   padding-bottom: 15vh;
}

@media screen and (max-width: 900px) {
  .left-content {
    display: none;
  }
  .right-content {
    padding-left: 1rem;
  }
}



/*End css*/
.orange {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #753500;
}

.text {
  color: #fff;
}

.black {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #070707;
}

.blue {
  height: 100vh;
  background-color: #00026d;
}


.text-wrap {
  position: relative;
  overflow: hidden;
  width: 450px;
  height: 80vh;
}

.panel-text {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 1;
  width: 100%;
  height: 100%;
  font-size: 40px;
  text-transform: uppercase;
  font-weight: 900;
  text-align:center;
  background-color: #070707;
  
  transform:translateY(100%);
  opacity: 0;
}

.panel-text.blue-text {
  color: blue;
}

.panel-text.red-text {
  color: red;
}

.panel-text.purple-text {
  color: purple;
}

.panel-text.orange-text {
  color: orange;
}






.p-wrap {
  position: relative;
  overflow: hidden;
  width: 450px;
  height: 80vh;
}

.panel {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-image: url("../images/5ed12171d9d512cb2feead83_5.jpg");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.panel._2 {
  z-index: 1;
  background-image: url("../images/5f5a5b3515c4dd0c2c455925_110642301_938622823267359_7859124022958180678_n201.jpg");
}

.panel.blue {
  z-index: auto;
}

.panel.red {
  z-index: auto;
  background-color: red;
  background-image: none;
}

.panel.orange {
  z-index: auto;
  background-color: #cf5d00;
  background-image: none;
}

.panel.purple {
  z-index: auto;
  background-color: #808;
  background-image: none;
}