/*
Theme Name: ArchistaDental
Theme URI: https://archistadental.com/
Author: Mustafa Gamal
Author URI: http://v-dre.org
Description: A custom theme with default features and capabilities.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: archistadental
*/

:root {
    /* Colors */
    /* Main: #17202a; */
    /* Secondary: #1a5276; */
    /* Light: #eeeeee; */
    /* Extra: #416c85; */
    /* Extra Light: #99a6ad; */

    /* Main Variables */
    --main-light-color: #eeeeee;
    --main-color: #17202a;
    --secondary-color: #34495e;
    --extra-color: #416c85;
    --extra-light-color: #99a6ad;
	--nav-bg-color: rgba(0,0,0,0.3);
    --main-font: 'Arial', sans-serif;
    --main-font: 'Cairo', sans-serif;
    --main-font-size: 16px;
    --main-line-height: 1.5;
    --main-bg-color: #D9DCD6;
    --main-bg-color: linear-gradient(-65deg, var(--main-color), var(--secondary-color), var(--main-color));
    --main-text-color: #ccc;
    --main-text-white-color: #ddd;
    --main-black-color: #111;
    --main-black-medium-color: #333;
    --main-black-light-color: #aaa;
    --main-border-color: transparent;
	--nav-hover-color: #047497;
    --main-border-width: 1px;
    --main-border-radius: 10px;
    --main-nav-border-radius: 50px;
    --main-nav-border-radius-min: 10px;
    --main-padding: 10px;
    --main-margin: 10px;
    --main-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    --desktop-content-margin: 15px;
    --mobile-content-margin: 10px;
}

html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--main-font) !important;
    font-size: var(--main-font-size) !important;
    line-height: var(--main-line-height) !important;
    background: var(--main-bg-color) !important;
    color: var(--main-text-color) !important;
}

/* Page content styling */
.content {
    /* margin: var(--desktop-content-margin) !important; */
    position: relative;
    display: grid;
    row-gap: 15px;
    min-height: 100vh;
}

/* Content sections styling */
.content .section {
    margin: 0;
    padding: var(--main-padding);
    border: var(--main-border-width) solid var(--main-border-color);
    border-radius: var(--main-border-radius);
    box-shadow: var(--main-shadow);
    overflow: hidden;
}
.content .section:not(.hero-section){
	background-color: var(--main-light-color);
	background-size: cover;
	background-position:top;
	background-repeat:no-repeat;
}

.content nav.section.navbar {
    border-radius: var(--main-border-radius) !important;
    background: transparent !important;
    background-color: var(--nav-bg-color) !important;
    position: sticky !important;
    top: 0px !important;
    z-index: 1000 !important;
    transition: border-radius 0.5s, top 0.5s, background 0.3s;
}

.content nav.section:has(.collapse.show),
.content nav.section:has(.collapsing) {
    border-radius: var(--main-nav-border-radius-min) !important;
}

.content nav.section.navbar.scrolled {
    background-color: unset !important;
    background: var(--main-bg-color) !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.content .section-title {
	display:inline-block;
    color: var(--nav-hover-color);
	background:rgba(0,0,0,0.4);
	border-radius:20px;
	padding:5px 25px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 600;
	margin-bottom:20px;
}

/* Social media links */
.social-media-links {
    display: flex;
    gap: 10px;
}

.social-media-link {
    color: var(--main-black-light-color);
    text-decoration: none;
    font-size: 1.1em;
    cursor: pointer;
}

.social-media-link:hover {
    color: var(--secondary-color);
}


/* Navigation styling */
.navbar{
	height:100px;
}
.navbar-toggler {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    cursor: pointer;
    position: relative;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 3px !important;
}

.navbar-toggler div {
    width: 100%;
    height: 1px;
    background-color: var(--main-black-light-color);
    transform: rotate(0deg) translate(0px, 0px);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.navbar-toggler.collapsed .line1 {
    transform: rotate(45deg) translate(5px, 5px);
}

.navbar-toggler.collapsed .line2 {
    opacity: 0;
}

.navbar-toggler.collapsed .line3 {
    opacity: 0;
}

.navbar-toggler.collapsed .line4 {
    transform: rotate(-45deg) translate(5px, -5px);
}

.navbar .nav-link{
    margin: 0px 15px;
	color: #eee !important;
    transition: .4s;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{
    color: var(--nav-hover-color) !important;
    transform: scale(1.15);
}

.navbar .nav-menu .menu-item{
	background:rgba(0,0,0,0.2) !important;
	border-radius:20px;
}
.navbar .nav-menu .menu-item.left{
	margin-right:20px;
}
.navbar .nav-menu .menu-item.right{
	margin-left:20px;
}
.navbar .nav-menu .mid{
	border-radius:0px;
}
.navbar .nav-menu .mid.first{
	border-top-left-radius:20px !important;
	border-bottom-left-radius:20px !important;
}
.navbar .nav-menu .mid.last{
	border-top-right-radius:20px !important;
	border-bottom-right-radius:20px !important;
}

/* Hero Area */
.hero-section {
	display:flex;
	justify-content:center;
    background-image: none !important;
    background-color: transparent;
    width: 100%;
    height: 80vh;
    background-size: cover;
    background-position: bottom left;
    background-repeat: no-repeat;
    background-attachment: fixed;
	border:none !important;
	overflow:hidden;
	box-shadow: 0 0 30px -4px var(--main-color),inset 0 0 50px 10px var(--secondary-color) !important;
}

.hero-text{
	position:absolute;
	top:20%;
	text-align:center;
	color: var(--secondary-color);
	font-weight:700 !important;
}
.hero-text h1{

	font-weight:700 !important;
}
.hero-text a{
	background-color: var(--nav-hover-color);
	display:block;
	width:fit-content;
	margin:0 10px;
	color:#ddd !important;
	padding:10px 45px;
	text-decoration:none;
	font-weight:400;
	border-radius:20px;
	margin-top:25px !important;
	box-shadow: 2px 5px 10px -4px var(--secondary-color);
	transition: 0.3s;
}
.hero-text a:nth-of-type(1){
	background-color: var(--secondary-color);
}
.hero-text a:nth-of-type(2){
	background-color: var(--nav-hover-color);
}
.hero-text a:hover{
	box-shadow: 0px 0px 20px -5px var(--secondary-color);
}


/* highlights */
.highlights-cont{
	position:absolute;
	bottom: 30px;
	background-color: var(--secondary-color);
	padding:30px;
	width: fit-content;
	display:flex;
	align-items:center;
	justify-content:space-around;
	border-radius:15px;
	-webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Standard syntax */
	
	/* From https://css.glass */
	background: rgba(12, 48, 66, 0.72);
	border-radius: 16px;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(9.4px);
	-webkit-backdrop-filter: blur(9.4px);
}
.highlights-cont .highlight{
	color: #dadada;
	padding: 0 30px;
	font-size:18px;
	border-right:solid 1px rgba(255,255,255, 0.3);
	height:50px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	font-weight:100;
	text-transform:capitalize;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
.highlights-cont .highlight:last-child{
	border-right:none;
}
.highlights-cont .highlight .iconify{
	margin-top:-15px;
	margin-bottom:5px;
}

/* footer style */
footer .logo-part h1 {
    text-transform: uppercase;
    margin-bottom: 40px;
}

footer {
    border-radius: var(--main-border-radius);
    background-color: var(--main-color);
    color: var(--extra-light-color);
}

footer p,
footer a {
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
}

footer h6 {
    margin-bottom: 40px;
    position: relative;
}

footer h6:after {
    position: absolute;
    content: "";
    background: var(--extra-light-color);
    width: 12%;
    height: 1px;
    left: 0;
    bottom: -20px;
}

.btn-footer {
    color: var(--extra-light-color);

    text-decoration: none;
    border: 1px solid;
    border-radius: 43px;
    font-size: 13px;
    padding: 7px 30px;
    line-height: 47px;
}

.btn-footer:hover {

    text-decoration: none;

}

.form-footer input[type="text"] {
    border: none;
    border-radius: 16px 0 0 16px;
    outline: none;
    padding-left: 10px;

}

.form-footer ::placeholder {
    font-size: 10px;
    padding-left: 10px;
    font-style: italic;
}

.form-footer input[type="button"] {
    border: none;
    background: var(--secondary-color);
    margin-left: -5px;
    color: var(--extra-light-color);
    outline: none;
    border-radius: 0 16px 16px 0;
    padding: 2px 12px;
}

footer ul li {
    list-style: none;
    display: block;
}

footer ul {
    padding-left: 0;
}

footer ul li a {
    text-decoration: none;
    color: var(--extra-light-color);
    text-decoration: none;
}

footer a:hover {
    text-decoration: none;
    color: #f5f5f5 !important;

}

.logo-part {
    border-right: 1px solid var(--extra-light-color);
    height: 100%;
}


/* small screen style */
@media (max-width: 992px) {
    /* menu items */
	.navbar{
		height: unset;
	}
	.navbar .nav-menu .menu-item.left,
	.navbar .nav-menu .menu-item.right{
		margin:0px;
	margin-top:20px;
		margin-bottom:20px;
}

.navbar .nav-menu .mid.first{
	
	border-bottom-left-radius:0px !important;
	border-top-left-radius:20px !important;
	border-top-right-radius:20px !important;
}
.navbar .nav-menu .mid.last{
	border-top-right-radius:0px !important;
	border-bottom-left-radius:20px !important;
	border-bottom-right-radius:20px !important;
}
	.navbar .nav-link:hover,
	.navbar .nav-link.active{
		padding-left:8px;
		transform:scale(1);
	}
	
	.content nav.section.navbar{
		position:relative !important;
	}
}