@import "style.css";

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900;1000&display=swap');
@import url('https://fonts.cdnfonts.com/css/gordita');

/*default class*/
body {
	-webkit-box-sizing: border-box;
	-moz-box-sizing   : border-box;
	-o-box-sizing     : border-box;
	box-sizing        : border-box;
	font-family       : 'Cairo', sans-serif;
	direction         : ltr;
}

.emcan:hover{
    color: red !important;
}

.in_word {
	word-spacing: 5px;
}

.transition_me {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition   : all 0.3s ease-in-out;
	-o-transition     : all 0.3s ease-in-out;
	transition        : all 0.3s ease-in-out;
}

.index_over {
	z-index: 1000
}

.form-select:focus {
	border-color: none;
}


button:focus:not(:focus-visible),
button,
select,
input,
textarea {
	outline: none;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
	margin-bottom: 0px;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus .form-check-input:focus {
	box-shadow: none;
}

.rounded {
	border-radius: 5px !important
}

.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover,
.carousel-control-next,
.carousel-control-prev {
	opacity: 1;
}

.point {
	cursor: pointer;
}

.row {
	margin-right: 0px;
	margin-left : 0px;
}

.tiny_font {
	font-size: 11px
}

.back_me {
	background: transparent
}

fieldset {
	display     : block;
	border-width: 2px !important;
	border-style: groove !important;
	border-color: transparent !important;
	border-image: initial !important;
}

fieldset>legend {
	margin-left: 30px
}

legend {
	float: none;
	width: auto
}

.carousel-control-next,
.carousel-control-prev {
	width: 7%;
}

/*main-class*/
:root {
	--main--color  : #3D3D3D;
	--second--color: #fff;
	--third--color : #000;
	--fourth--color : #CA9C6A;
}

.upper-icon{
    background : var(--fourth--color);
    padding : 5px;
    border-radius: 50%;
}

.upper-icon:hover{
    background : var(--main--color);
    transition: all 0.3s ease-in-out;
}

.main_color {
	color: var(--main--color);
}

.second_color {
	color: var(--second--color);
}

.third_color {
	color: var(--third--color);
}

.main_cus {
	background: #3D3D3D;
}

.main_bg {
	background: var(--main--color);
}

.second_bg {
	background: var(--second--color);
}

.third_bg {
	background-color: var(--third--color);
}

.our_opacity {
	opacity: 0.7;
}

.uppercase {
	text-transform: uppercase;
}

.my_letter {
	letter-spacing: 1.8px;
}

.my_row {
	align-items    : center;
	justify-content: center;
}

.my_flex {
	display        : flex;
	justify-content: center;
	align-items    : center;
}

.main_bt {
	background-color: var(--main--color);
	color           : var(--second--color);
}

.main_bt:hover {
	background-color: var(--third--color);
	color           : var(--second--color);
}

/* start slider */
.in_slider {
	position: relative;
	top     : -450px;
	z-index : 9999;
	height  : 650px;
}

.in_slider .hello {
	background-color: rgba(255, 255, 255, 0.8);
	padding         : 40px 40px;
	border-radius   : 25px;
}

.input_border {
	border       : 1px solid var(--main--color);
	border-radius: 12px;
}


/* start services */
.in_services {
	width        : 100%;
	padding      : 20px;
	border-radius: 5px;
	text-align   : center;
	/* box-shadow   : 0 .5rem 1rem rgba(0, 0, 0, .15) !important; */
    border: 1px solid #CA9C6A70;
    border-radius: 5px;
	transition   : all 0.3s ease-in-out;
	cursor       : pointer;
}

.in_services:hover {
	box-shadow: none;
	background: var(--fourth--color);
	transition: all 0.3s ease-in-out;
}

.hover-shadow {
	display                    : inline-block;
	position                   : relative;
	transition-duration        : 0.3s;
	transition-property        : transform;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	transform                  : translateZ(0);
	box-shadow                 : 0 0 1px rgba(0, 0, 0, 0);
}

.hover-shadow:before {
	pointer-events     : none;
	position           : absolute;
	z-index            : -1;
	content            : "";
	top                : 100%;
	left               : 5%;
	height             : 10px;
	width              : 90%;
	opacity            : 0;
	background         : radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
	/* W3C */
	transition-duration: 0.3s;
	transition-property: transform opacity;
}

.hover-shadow:hover {
	transform                : translateY(-8px);
	animation-name           : hover;
	animation-duration       : 1.5s;
	animation-delay          : 0.3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction      : alternate;
}

.hover-shadow:hover:before {
	opacity                  : 0.6;
	transform                : translateY(8px);
	animation-name           : hover-shadow;
	animation-duration       : 1.5s;
	animation-delay          : 0.3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction      : alternate;
}

@keyframes hover-shadow {
	0% {
		transform: translateY(10px);
		opacity  : 0.4;
	}

	50% {
		transform: translateY(3px);
		opacity  : 1;
	}

	100% {
		transform: translateY(10px);
		opacity  : 0.4;
	}
}

/* start offer  */
.carousel-indicators {
	bottom: -50px;
}

.carousel-indicators [data-bs-target] {
	width           : 8px;
	height          : 8px;
	border          : 1px solid var(--main--color);
	background-color: transparent;
	border-radius   : 50%;
}

.carousel-indicators .active {
	background-color: var(--main--color);
}

/* start our team  */

.our_team {
	background     : url('../img/Rectangle\ 72.png');
	background-size: cover;
	padding        : 50px 0px;
}

.my_cart {
	position     : relative;
	box-shadow   : 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
	overflow     : hidden;
	border-radius: 20px;
	cursor       : pointer;

}

.sliderArrow{
    background: var(--fourth--color);
    color: var(--main--color);
    cursor: pointer;
    transition   : all 0.3s ease-in-out;
}
.sliderArrow:hover{
    background: var(--main--color);
    color: white;
}

.my_cart img {
	width: 100%;
}

.in_my_cart {
	background-color: var(--second--color);
	position        : absolute;
	bottom          : -100px;
	right           : 0px;
	text-align      : center;
	padding         : 15px;
	width           : 100%;
	transition      : all 0.3s ease-in-out;
}

.nav-tabs {
	display        : flex;
	justify-content: space-around;
	align-items    : center;
	border-bottom  : none;
}

.nav-item{
    padding-bottom: 5px;
}
.nav-item:hover{
    border-bottom: 3px solid var(--main--color);
}
.nav-item.active{
    border-bottom: 3px solid var(--main--color);
}

/* .project .nav-tabs .nav-link:focus,
.project .nav-tabs .nav-link:hover,
.project .nav-tabs .nav-item.show .nav-link,
.project .nav-tabs .nav-link.active {
	border-color: transparent;
} */

.project .nav-tabs .nav-link.active {
	background-color: var(--main--color);
	color           : var(--second--color) !important;
	border-radius   : 5px;
}

.my_cart:hover .in_my_cart {
	bottom    : 0px;
	transition: all 0.3s ease-in-out;
}

.bt_slide {
	background-color: var(--main--color);
	color           : var(--second--color);
	width           : 60px;
	border-radius   : 15px;
	height          : 35px;
	transition      : all 0.3s ease-in-out;
	font-size       : 25px;
	display         : flex;
	justify-content : center;
	align-items     : center;
}

.bt_slide:hover {
	background-color: var(--third--color);
	transition      : all 0.3s ease-in-out;
}

.our_team .carousel-control-next,
.our_team .carousel-control-prev {
	position: static;
}

/* start contact  */
.form {
	width   : 75%;
	position: relative;
	height  : 50px;
	overflow: hidden;
	padding : 30px 0px;
	margin  : 40px auto;
}

.form textarea,
.form input {
	font-size  : 16px;
	/* padding-top: 20px; */
	/* width      : 100%;
	height     : 100%; */
	background : transparent;
	color      : #595F6E;
	border     : none;
	outline    : none;
}

.form label {

	position      : absolute;
	bottom        : 0px;
	right         : 0px;
	width         : 100%;
	height        : 100%;
	border-bottom : 1px solid black;
	pointer-events: none;
}

.form label::after {
	content      : "";
	position     : absolute;
	bottom       : -1px;
	right        : 0px;
	height       : 100%;
	width        : 100%;
	border-bottom: 3px solid #5FA8D3;
	transition   : transform 0.5s cubic-bezier(1, .06, .73, .37);
	transform    : translateX(-100%);
}

div.form span {
	position  : absolute;
	bottom    : 5px;
	right     : 0px;
	transition: all 0.5s ease;
	color     : var(--main--color);
}

.form textarea:focus+.label-hoshi .content-hoshi,
.form textarea:valid+.label-hoshi .content-hoshi,
.form input:focus+.label-hoshi .content-hoshi,
.form input:valid+.label-hoshi .content-hoshi {
	transform: translateY(-150%);
	font-size: 14px;
	color    : #5FA8D3;
}

.form textarea:focus+.label-hoshi::after,
.form textarea:valid+.label-hoshi::after,
.form input:focus+.label-hoshi::after,
.form input:valid+.label-hoshi::after {
	transform: translateX(0%);
}

/* to top */
.m-backtotop {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition   : all 0.3s ease-in-out;
	-ms-transition    : all 0.3s ease-in-out;
	-o-transition     : all 0.3s ease-in-out;
	transition        : all 0.3s ease-in-out;
	position          : fixed;
	bottom            : -50px;
	right             : 30px;
	width             : 50px;
	height            : 50px;
	background        : var(--main--color);
	border-radius     : 25px;
	text-align        : center;
	border            : 2px solid #fff;
	box-shadow        : 0 2px 3px rgba(0, 0, 0, 0.1);
	opacity           : 0;
	overflow          : hidden;
	color             : #fff;
}

.m-backtotop.active {
	bottom : 15px;
	opacity: 1;
}

.m-backtotop>div {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition   : all 0.3s ease-in-out;
	-ms-transition    : all 0.3s ease-in-out;
	-o-transition     : all 0.3s ease-in-out;
	transition        : all 0.3s ease-in-out;
}

.m-backtotop>div.arrow {
	position : absolute;
	top      : 50%;
	left     : 50%;
	transform: translateY(-50%) translateX(-50%);
	opacity  : 1;
}

.m-backtotop>div.text {
	font-size     : 5px;
	font-size     : 0.5rem;
	line-height   : 10px;
	text-transform: uppercase;
	font-weight   : 900;
	font-family   : "Open Sans", sans-serif;
	position      : absolute;
	left          : 50%;
	top           : 50%;
	transform     : translateY(50%) translateX(-50%);
	opacity       : 0;
	margin-top    : 1px;
}

.m-backtotop:hover {
	transform : scale(1.1);
	bottom    : 20px;
	cursor    : pointer;
	background: var(--main--color);
	box-shadow: 0 10px 5px rgba(0, 0, 0, 0.1);
}

.m-backtotop:hover>div.arrow {
	transform: translateY(-150%) translateX(-50%);
	opacity  : 0;
}

.m-backtotop:hover>div.text {
	transform: translateY(-50%) translateX(-50%);
	opacity  : 1;
}