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

:root {

  --text-color: #8f8f8f;
  --white: #fff;
    --link-color: #2F2F2F; 
  --title-color: #202020;
  --main-color:  #bd9a68;
  --arrow-color: #1891FA ; 
  --green-color: #24E54B ; 
 
  --second-color: #EFEFEF ; 

  /* ==============  font size =================== */

  --font-10px: 10px ; 
  --font-12px: 12px ; 
  --font-14px: 14px ; 
  --font-16px: 16px ; 
  --font-18px: 18px ; 
  --font-20px: 20px ; 
  --font-22px: 22px ; 
  --font-24px: 24px ;
  --font-26px: 26px ;
  --font-28px: 28px ;

  --font-30px: 30px ;
  --font-32px: 32px ;

  --font-35px: 35px ;
  --font-40px: 40px ; 
  --font-50px: 50px ; 
  --font-62px: 62px ; 




  --transisiton: all 500ms ease;
  /* =============== font weight ============ */
  --font-400: 400;
  --font-500: 500;
  --font-600: 600;
  --font-700: 700;
}





html,
body {
  overflow-x: hidden;
}

::placeholder {
  font-size: var(--font-16px);
  color: var(--text-color);
}

body {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  font-family: "Georama", sans-serif;
  background: var(--white);
  min-height: 100vh;
}




u {
  font-size: var(--font-16px);
}

a {
  text-decoration: none;
  font-size: var(--font-16px);
}



img {
  max-width: 100%;
  object-fit: cover;
  display: block;
}



.container-xl {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.bg-section {
  background: #f0e9df;
}

.bg-silver {
  background: #eee;
 }

 .main-color {
  color: var(--main-color) !important;
 }

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

textarea {
  outline: none;
  resize: none;
  height: 135px;
}

input {
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
/* Vector */


p {
  color: var(--text-color);

}
.grid {
  display: grid;
}
.grid-2 {
  grid-template-columns: repeat(2 ,  1fr );
}
.grid-3 {
  grid-template-columns: repeat(3 ,  1fr );
}
.grid-4 {
  grid-template-columns: repeat(4 ,  1fr );
}

/* haeder */

.social-header {
  background: #f0e9df;
  padding: 10px;
}

header {
  padding: 10px 0 ;
  background: var(--white);
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  height: 70px ; 
  border-radius: 50%;

}

.navbar a  {
  padding: 10px 15px ;
  /* color: var(--main-color); */
  font-weight: var(--font-600);
  color: var(--link-color);
}

.section-content {
  padding-block: 70px 70px;
}

.section-content img {
  border-radius: 10px;
}

.title {
  font-size: var(--font-40px);
  color: var(--title-color);
  font-weight: var(--font-600);
}

.sub-title {
  color: var(--main-color);
  font-size: var(--font-18px);
  font-weight: var(--font-500);
}

.title-text {
  color: var(--text-color);
  font-size: var(--font-16px);
  font-weight: var(--font-400);
}


.certificate img  {
box-shadow: 0px 7px 20px 0px rgba(0, 0, 0, 0.1);
}

/*  hero  */


main {
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:  linear-gradient(#00000071 , #00000062) ,  url("../img/12161.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

main h2 {
  color: var(--white);
  font-size: var(--font-62px);
  font-weight: var(--font-700);
  margin-block: 20px;
}

main h4 {
  color: #FFAE04FA;
  font-size: var(--font-16px);
}

main p {
  color: var(--second-color);
  font-size: var(--font-18px);
  font-weight: var(--font-500);
  margin-bottom: 50px ;
}

main a {
  color: var(--white) !important;
  background-color: var(--main-color);
  padding: 15px 40px ;
  border-radius: 5px ;
  font-size: var(--font-16px);
  font-weight: var(--font-500);
}


/* contact form  */

.contact-form {
  background: var(--white);
  border-radius: 10px ;
  padding: 40px;
  box-shadow: 0px 7px 20px 0px rgba(0, 0, 0, 0.1);
 
}


.form-input input ,  .form-input textarea {
  width: 100%;
  padding: 12px 15px ;
  border-radius: 5px;
  outline: none;
  border: none;
  background: #f0e9df;
  margin-bottom: 12px;
}

.contact-form  h4 {
  text-align: center;
  font-size: var(--font-24px);
  color: var(--title-color);
  font-weight: var(--font-600);
}

.contact-form  p {
    text-align: center;
  font-size: var(--font-14px);
  color: var(--text-color);
  font-weight: var(--font-500);
}

.btn-my {
  border: none ;
  background: var(--main-color);
  color: var(--white) !important;
  font-size: var(--font-14px);
  font-weight: var(--font-600);
  padding: 12px 30px ;
  border-radius: 5px;
}

.map iframe {
  width: 100%;
  border-radius: 10px;

}

/*  review-box */

.review-box {
	background: var(--white);
	border-radius: 20px;
	padding: 30px 30px 25px;
/* box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.1); */
}

.review-box-header {
	display: flex;
	align-items: center;
	gap: 15px;
}

.review-box-header img {
	width: 70px;
	height: 70px;
	border-radius: 50%;
}

.review-box-header h6 {
	font-weight: var(--font-600);
	font-size: var(--font-18px);
	color: var(--title-color);
  margin-bottom: -2px;
}

.review-box-header small {
	font-weight: var(--font-600);
	font-size: var(--font-14px) ;
	color: var(--text-color);
}

.review-box-body p {
	font-size: var(--font-16px);
	margin-top: 22px;
}

.review-star i {
	color: #fcb800;
	font-size: 16px;
}
.tns-nav button {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--text-color);
  border: none !important;
}


.tns-nav button.tns-nav-active {
	width: 20px;
	height: 10px;
	border-radius: 5px;
	background: var(--main-color);
}

.tns-nav {
	text-align: center;
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 50px;
}

/* follow-social  */

.follow-social a i  {
  display: block;
 height: 40px ;
 width: 40px ;
 text-align: center;
 line-height: 40px ;
 border-radius: 50% ;
 color: var(--white);
 background: var(--main-color);
 font-weight: 600;
}



.follow-social-top a i {

	height: 30px;
	width: 30px;
  line-height: 30px;
	border-radius: 50%;
	color: var(--white);
	background: var(--main-color);
}



/* footer  */

footer {
  background-color: var(--main-color);
  padding-block: 70px;
}

 footer .follow-social-top a i {

	color: var(--main-color);
	background: var(--white);
}

footer .nav a {
  font-size: var(--font-14px);
  font-weight: var(--font-600);
  color: var(--white);
}

footer p {
  font-size: var(--font-12px);
  color: var(--white);
  font-weight: var(--font-500);
}


@keyframes infiniteScroll {
  from {transform: translateX(0)}
  to {transform: translateX(-50%)}
}

.scroll {
	width: 100%;
	overflow: hidden;
	background: var(--main-color);
	color: var(--white);
	font-size: var(--font-16px);
	font-weight: var(--font-600);
	padding: 10px;
}

.horizontal-scrolling-items {
	display: flex;
	gap: 20px;
	width: 2600px;
	animation-name: infiniteScroll;
	animation-duration: 50s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;

}

.horizontal-scrolling-items__item {
	white-space: nowrap;
}

.gallery img  {
  aspect-ratio: 4/3 !important;
  width: 100%;
}

.hero-section-2 {
  min-height: 300px;
}


@media (max-width:992px) {
  :root {



 
  --font-12px: 12px ; 
  --font-14px: 14px ; 
  --font-16px: 15px ; 
  --font-18px: 16px ; 
  --font-20px: 18px ; 
  --font-22px: 20px ; 
  --font-24px: 22px ;
  --font-26px: 23px ;
  --font-28px: 25px ;

  --font-30px: 26px ;
  --font-32px: 28px ;

  --font-35px: 30px ;
  --font-40px: 30px ; 
  --font-50px: 40px ; 
  --font-62px: 50px ; 

}

main {
	min-height: 400px;

}

.logo img {
	height: 60px;

}

.horizontal-scrolling-items__item  {
  font-size: var(--font-16px);
}

.section-content {
	padding-block: 50px 50px;
}
.hero-section-2 {
	min-height: 200px;
}

}

#menu-btn {
  display: none;
}


@media (max-width:776px) {
  :root {



 
  --font-12px: 11px ; 
  --font-14px: 13px ; 
  --font-16px: 14.5px ; 
  --font-18px: 15.5px ; 
  --font-20px: 17px ; 
  --font-22px: 19px ; 
  --font-24px: 21px ;
  --font-26px: 22px ;
  --font-28px: 23.5px ;

  --font-30px: 25px ;
  --font-32px: 27px ;

  --font-35px: 29px ;
  --font-40px: 30px ; 
  --font-50px: 35px ; 
  --font-62px: 40px ; 

}

main {
	min-height: 350px;

}

.logo img {
	height: 60px;

}

.section-content {
	padding-block: 40px 40px;
}
.hero-section-2 {
	min-height: 150px;
}

main h2 {
	color: var(--white);
	font-size: var(--font-62px);
	font-weight: var(--font-700);
	margin-block: 10px;
}

.grid-2 {
  grid-template-columns: 1fr ;
}

.grid-3 {
  grid-template-columns: 1fr  1fr ;
}


#menu-btn {
  display: block;
   font-size: 30px;
  color: var(--main-color);
  z-index: 9999999999;
}

header .navbar {
	position: absolute;
	top: 0;

	flex-direction: column;
	height: 100vh;
	justify-content: center;
	width: 400px;
	max-width: 100%;
	background: white;
  z-index: 9999;
  gap: 20px;
  font-size: 20px;
  transition: var(--transisiton);

  	left: -100%;
}

header .navbar.active {
  left: 0;
}

header .navbar a {
    font-size: 20px;
}



}

@media (max-width:550px) {

 :root {



 
  --font-12px: 10px ; 
  --font-14px: 11px ; 
  --font-16px: 12px ; 
  --font-18px: 13px ; 
  --font-20px: 15px ; 
  --font-22px: 17px ; 
  --font-24px: 20px ;
  --font-26px: 21px ;
  --font-28px: 23px ;

  --font-30px: 24px ;
  --font-32px: 25px ;

  --font-35px: 26px ;
  --font-40px: 26.5px ; 
  --font-50px: 27px ; 
  --font-62px: 30px ; 

}

.social-header {
  display: none ;
 
}

main a {
	padding: 12px 25px;
	font-size: var(--font-14px);

}

main p {
	margin-bottom: 20px;
}

main {
	min-height: 250px;
}
.contact-form {

	padding: 30px 20px;

}

.form-input input, .form-input textarea {
	padding: 10px 12px;

}

.btn-my {
	padding: 10px 25px;

}

.section-content {
	padding-block: 30px 30px;
}

.review-box-body p {
	margin-top: 10px;
  margin-bottom: 10px;
}
.review-box-header img {
	width: 50px;
	height: 50px;
}

.tns-nav {
  gap: 5px;
	margin-top: 30px;
}

footer {
	padding-block: 40px;
}

}


@media (max-width:452px) {

   :root {



 
  --font-12px: 9px ; 
  --font-14px: 10px ; 
  --font-16px: 11px ; 
  --font-18px: 12px ; 
  --font-20px: 14px ; 
  --font-22px: 16px ; 
  --font-24px: 18.5px ;
  --font-26px: 20px ;
  --font-28px: 21px ;

  --font-30px: 22px ;
  --font-32px: 23px ;

  --font-35px: 24px ;
  --font-40px: 25px ; 
  --font-50px: 26px ; 
  --font-62px: 28px ; 

}



  main p {

	display: none;
}

main h2 {
	margin-block: 5px 20px;
}

main {
	min-height: 200px;
}
main a {
	padding: 10px 18px;

}

.scroll {
	padding: 5px;
}

.grid-3 {
  grid-template-columns: 1fr ;
}
}


@media (min-width: 550px ) {
  .grid-2 {
    gap: 25px !important;
  }
}