/* Fida Marwat (Sr. UXUI and Front End Developer) */



/* first media query for mobile responsiveness */

@media(min-width:320px) and (max-width:375px){

  .watch-results {
    position: absolute;
    left: 12% !important;
    text-align: center;
    z-index: 999;
    transform: translate(100%, -35%) !important;
    top: 0 !important;
  }

	.circle-right {
    width: 70px;
    top: 34% !important;
    right: 0px;
  }

  .circle-bottom2 {
    bottom: unset;
    left: 6%;
    width: 15%;
    top: 16%;
  }

  .circle-left2 {
    bottom: 0%;
    right: unset;
    width: 26%;
    left: -62px;
  }

	.circle-bottom7 {
    bottom: 0%;
    right: 39%;
    width: 16%;
  }

  .circle-righte {
    width: 90px;
    top: unset;
    right: unset;
    bottom: 8%;
    left: 0px;
  }

  .circle-right7 {
    width: 150px;
    top: 17%;
    right: 0;
  }

	.circle-right6{
    width: 200px;
    top: unset;
    bottom: -16%;
    right: 25%;
  }

  .circle-bottom6 {
    bottom: 25%;
    left: 0;
    width: 20%;
  }

  .circle-left6 {
    top: 48%;
    right: 5%;
    width: 14%;
  }

  .result-logo-sec{
  	margin-bottom: 80px !important;
  }

	.circle-bottom5 {
    top: 20%;
    left: 6%;
    width: 18%;
  }

  .circle-righttt {
    width: 150px;
    bottom: 0;
    left: -40px;
  }

  .circle-left5 {
    top: 33%;
    right: 0;
    width: 26%;
  }

	.main-card{
  	width: auto;
  	margin-top: 40px !important;
  }

	.circle-right4 {
    width: 150px;
    top: 28%;
    left: -40px;
  }

  .circle-bottom4 {
    bottom: -5%;
    left: 15%;
    width: 16%;
  }

  .circle-left4 {
    bottom: 0%;
    right: 0%;
    width: 30%;
    top: unset;
  }

	.company-btns{
  	margin-top: 30px;
  	margin-bottom: 300px;
  }

	.circle-left {
    top: 13%;
    left: -14%;
    width: 20%;
  }

  .circle-bottom {
    bottom: 8%;
    right: 20%;
    width: 14%;
  }

  .circle-rightt{
    width: 170px;
    bottom: -70px;
    left: 10%;
  }
}

@media(min-width:376px) and (max-width:766px){

	.circle-right {
    width: 70px;
    top: 20% !important;
    right: 0px;
  }

  .circle-bottom2 {
    bottom: unset;
    left: 6%;
    width: 15%;
    top: 11%;
  }

  .circle-left2 {
    bottom: 20%;
    right: unset;
    width: 26%;
    left: -62px;
  }

	.circle-bottom7 {
    bottom: 6%;
    right: 39%;
    width: 16%;
  }

  .circle-righte {
    width: 90px;
    top: unset;
    right: unset;
    bottom: 28%;
    left: 0px;
  }

  .circle-right7 {
    width: 150px;
    top: 13%;
    right: 0;
  }



	.circle-right6{
    width: 200px;
    top: unset;
    bottom: 0%;
    right: 25%;
  }

  .circle-bottom6 {
    bottom: 40%;
    left: 0;
    width: 20%;
  }

  .circle-left6 {
    top: 38%;
    right: 5%;
    width: 14%;
  }

  .result-logo-sec{
  	margin-bottom: 80px !important;
  }

	.circle-bottom5 {
    top: 16%;
    left: 6%;
    width: 18%;
  }

  .circle-righttt {
    width: 150px;
    bottom: 180px;
    left: -40px;
  }

  .circle-left5 {
    top: 24%;
    right: 0;
    width: 26%;
  }

	.main-card{
  	width: auto;
  	margin-top: 90px !important;
  	margin-bottom: 10px;
  }

	.circle-right4 {
    width: 150px;
    top: 20%;
    left: -40px;
  }

  .circle-bottom4 {
    bottom: 20%;
    left: 15%;
    width: 16%;
  }

  .circle-left4 {
    bottom: 25%;
    right: 0%;
    width: 30%;
    top: unset;
  }

	.company-btns{
  	margin-top: 30px;
  	margin-bottom: 0px;
  }

	.circle-left {
    top: 13%;
    left: -14%;
    width: 20%;
  }

  .circle-bottom {
    bottom: 30%;
    right: 20%;
    width: 14%;
  }

  .circle-rightt{
    width: 170px;
    bottom: 100px;
    left: 10%;
  }
}

@media(max-width:767px){

  .custom-thank-card{
    margin-top: 60px !important;
  }

  .rs-container{width:98% !important;}

  .result-mobile-watch{
    margin-top:30px;
  }

  .caro-img-border{
    border: 1px solid #222222;
    margin-top: 10px;
  }

	body{
		height: auto;
		background-size: auto;
		background-position: unset;
	}

	.date-time .fs-6{
	  font-size: 8px !important;
	  left: 49.5%;
    top: 45.5%;
	}

	.date-time .fs-1{
	  left: 51%;
    top: 47%;
    font-size: 34px !important;
	}

	.btns{
		z-index: 999;
	}

	.btns .btn-watch{
	  left: 4px;
	  width: 117px;
	  top: 70%;
	  font-size: 14px;
	  padding: 8px 16px;
	}

	.btns .btn-buy{
		width: 120px;
	  right: 10px;
	  top: 70%;
	  font-size: 14px;
	  padding: 8px 16px;
	}

	.m-quote-img{
	  z-index: -1;
	  top: -20px;
	  left: -12px;
	  width: 80px;
	}

	.btns .start-0{
		left: 15px !important;
	}

	.btns .end-0{
		right: 15px !important;
	}

	#footer .col-md-10{
		display: block !important;
		text-align: center;
	}

	.top-navbar{
		display: none;
	}

	.mobile-top-navbar{
		background-color: #fdf6e9;
		padding: 0px;
	}

	.order-2{
		background-color: #f9f5ed;
	}

	.order-1{
		padding: 0px;
	}

	.watch-img {
    width: 100%;
  }

  .logo {
    width: 22%;
    top: 76px;
    left: 37%;
  }

  .carousel-text p{
	  color: #263238;
	}

	.mobile-content{
		text-align: center;
		bottom: -115px;
		color: #263238;
	}

	.mobile-content h1{
	  font-family: 'Montserrat', sans-serif;
	  font-weight: 700;
	  line-height: normal;
	  font-size: 70px;
	}

	.mobile-content p{
	  font-family: 'Montserrat', sans-serif;
	  font-size: 50px;
	  line-height: normal;
	}

	.watch-btn {
    bottom: -140px;
    left: 32%;
  }

  #watchCarousel{
  	margin-top: 90px !important;
  }

  #footer-2{
  	padding-top: 0px;
  }

  #footer-2 .btn-next{
  	background-color: #9c8d72;
  	color: #74664a;
  	padding: 6px 16px;
  	border-color: #9c8d72;
  }

  #footer-2 .btn-back{
  	padding: 6px 16px;
  	margin-right: 10px;
  }

  #footer-2 .progress{
  	height: 6px;
  	border-radius: 0px;
  	margin-bottom: 8px;
  	background-color: #e7cfa5;
  }

  #footer-2 .progress-bar{
  	background-image: linear-gradient(#AF640C, #DDB243);
  }

  .v-progress{
  	display: none;
  }

  .company-btns .btn{
  	width: 100% !important;
  }

  .logo-sec{
  	background-color: #313a3f;
  	padding: 20px 0px;
  	margin-bottom: 20px;
  }

  .logo-sec img{
  	margin: auto;
  	display: block;
  }

  .logo-sec .close{
  	right: 15px;
  }

  .mobile-col-md-3{
  	padding: 0px;
  }

  .company-btns{
  	margin-top: 30px;
  	margin-bottom: 300px;
  }

  .step-para{
  	color: #fff;
  }

  .step-para span{
  	font-size: 12px;
  	color: rgba(255, 255, 255, 0.7);
  }

  .main-card{
  	width: auto;
  	padding-left: 10px;
  	padding-right: 10px;
  }

  label.box{
  	width: 115px;
  	margin: 0px 7px;
  	height: 110px;
  }

  label.box .course {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  label.box .circle{
  	position: absolute;
  	left: 0px;
  	top: 0px;
  }

  .card-watch{
  	display: none;
  }

  .results-card-body{
  	text-align: center;
  	height: auto;
  	padding-top: 170px;
  }

  .brandGalaxy, .watchGalaxy, .typeGalaxy, .informationGalaxy, .resultGalaxy, .finishGalaxy{
    display: none;
  } 

  .resultsMainDiv{
    margin-top: 110px;
  }

  .finishMainDiv{
    margin-top: 120px;
  }

  .model-drop{
  	display: none;
  }

  .carousel-indicators{
  	width: 100%;
  	overflow-x: auto;
    margin: 15px auto 30px auto;
  }

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

  /* filter checkbox */

  .custom-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 100px;
    user-select: none;
    margin-right: 10px;
    margin-bottom: 15px;
    background-color: transparent; /* Default background color */
    border: 2px solid transparent; /* Default border color */
  }

  /* .custom-checkbox.checked {
    background-color: rgb(73, 88, 95);
  } */

  .custom-checkbox .checkbox-icon {
    width: 20px;
    height: 20px;
    border: 2px solid;
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
    transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  }

  .custom-checkbox .gold{
    border-color: #e7dcb7;
  }

  .custom-checkbox .silver{
    border-color: #d9d9d9;
  }

  .custom-checkbox .black{
    border-color: #000000;
  }

  .custom-checkbox .white{
    border-color: #ffffff;
  }

  .custom-checkbox .blue{
    border-color: #006cff;;
  }

  .custom-checkbox .green{
    border-color: #28d500;
  }

  .custom-checkbox .male{
    border-color: #B99E70;
  }

  .custom-checkbox .female{
    border-color: #B99E70;
  }

  .custom-checkbox .unisex{
    border-color: #B99E70;
  }

  .custom-checkbox .sizes{
    border-color: #B99E70;
  }

  .uncheckedValue input{ background-color: transparent; }

  .custom-checkbox input:checked + .male{
    background-color: #B99E70;
    border-color: #B99E70;
  }

  .custom-checkbox input:checked + .female{
    background-color: #B99E70;
    border-color: #B99E70;
  }

  .custom-checkbox input:checked + .unisex{
    background-color: #B99E70;
    border-color: #B99E70;
  }

  .custom-checkbox input:checked + .sizes{
    background-color: #B99E70;
    border-color: #B99E70;
  }

  .custom-checkbox input:checked + .blue {
    background-color: #1f5297;
    border-color: #1f5297;
  }

  .custom-checkbox input:checked + .green {
    background-color: #28d500;
    border-color: #28d500;
  }

  .custom-checkbox input:checked + .gold {
    background-color: #e7dcb7;
    border-color: #e7dcb7;
  }

  .custom-checkbox input:checked + .silver {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
  }

  .custom-checkbox input:checked + .black {
    background-color: #000000;
    border-color: #000000;
  }

  .custom-checkbox input:checked + .white {
    background-color: #ffffff;
    border-color: #ffffff;
  }

  .custom-checkbox input:checked + .blue {
    background-color: #006cff;
    border-color: #006cff;
  }
   
  .custom-checkbox input:checked + .green {
    background-color: #28d500;
    border-color: #28d500;
  }

  .right2{
    display: none;
  }

  .btn-info{
  	background-color: #B99E70;
  	border-color: #B99E70;
  	color: #fff;
  }

  .btn-info:hover{
  	background-color: #B99E70 !important;
  	border-color: #B99E70 !important;
  	color: #fff !important;
  }

  .btn-outline-info{
  	background-color: transparent;
  	border-color: #B99E70;
  	color: #B99E70;
  }

  .btn-outline-info:hover{
  	background-color: transparent !important;
  	border-color: #B99E70 !important;
  	color: #B99E70 !important;
  }

  .offcanvas.offcanvas-bottom{
  	height: auto;
  	overflow: hidden;
  	border-top-left-radius: 18px;
  	border-top-right-radius: 18px;
  }

  .offcanvas-header{
  	border-top-left-radius: 18px;
  	border-top-right-radius: 18px;
  }

  #carouselExampleCaptions{
  	width: auto;
  }

  #carouselExampleCaptions .carousel-item .slider-img{
	  width: 60%;
	}

	.carousel-caption {
		left: 36px;
	}

	.thank-card{
		height: auto;
	}

	.w-75{
		width: 100% !important;
	}

  /* .watch-results {
    position: absolute;
    left: 11%;
    text-align: center;
    z-index: 999;
    transform: translate(100%, -35%);
    top: 0;
  } */

  .watch-results {
    position: absolute;
    left: 0 !important;
    right:0;
    text-align: center;
    z-index: 999;
    transform: translate(0) !important;
    top: 0 !important;
  }
}

@media(min-width:1600px) and (max-width:1920px){

	.large-device{
		align-items: center;
	}

	.top-navbar{
		position: absolute;
		top: 0px;
	}

	.watch-img {
    width: 100%;
    height: 96vh;
  }

  .custom-height{
  	height: 96vh;
  }

  #watchCarousel{
  	margin-bottom: 0px !important;
  }
}