.item1 { grid-area: header; }
.item2 { grid-area: mid; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: foot;}
/*Colors*/
@font-face {
  font-family: 'CustomFont';
  src: url('./fonts/DINASTI-Bold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'CustomFont2';
  src: url('./fonts/Mont-HeavyDEMO.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Source Sans Pro';
  src: url('./fonts/SourceSansPro-Light.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
:root {
  --font1: "Lato", "Lucida Grande", Helvetica, Verdana, Arial;
  --blue: #1e90ff;
  --orange: #ffa500;
  --yellow: #faeb36;
  --green: #79c314;
  --blue: #487de7;
  --indigo: #4b369d;
  --violet: #70369d;
  --menuhovercolr :rgb(130, 125, 125);
  --menuhoverdelay: 0.5s;
  --kabobs: #f9b677;
  --type1: #213A57;
  --type2:#0b6477;
  --type3: #14919b;
  --type4:#0ad1c8;
  --type5: #45dfb1;
  --type6: #80ed99;
  --twine: #f4e7fb;
  --twine2: #f3dcdc;
  --twine3: #f5bcba;
  --twine4: #e3aadd; 
  --twine5: #c8a8e9;
  --twine6: #c3c7f3;
--rain1:#ef476f;
--rain2:#f78c6b;
--rain3: #ffd166;
--rain4:#06d6a0;
--rain5: #118ab2;
--rain6: #073b4c;
--df : #e9f5db;
--df1: #cfe1b9;
--df2: #b5c99a ;
--df3: #97a97c; 
--df4: #87976a;
--df5: #718355;
--bro1: #a36361;
--bro2: #d3a29d;
--bro3: #e8b298;
--bro4: #eecc8c;
--bro5: #bdd1c5;
--bro6: #9eaba2;

}
.grid-container {
  display: grid;
  grid-template-areas:
    'header header header'
    'mid main right'
    'foot foot foot';
  gap: 50px;
  background-color: #ffffff;
  padding: 40px 40px 10px 40px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 0 0;
  font-size: 30px;
}
h3{
  font-family: 'Source Sans Pro';
}
.item1 {
    display: grid;
    grid-template-rows: auto auto; /* Two rows within the item */
}

#davuu1 {
    grid-row: 1; /* Positioning the first <a> tag in the first row */
}

#davuu2 {
    font-family: "Source Sans Pro";
    font-size: 21px;
    margin-top: 150px;
    grid-row: 2; /* Positioning the second <a> tag in the second row */
}
.div3 .grid-container .item1 #davuu1{
    font-size: 150px;
    margin-top: 50px;
    font-weight: 700;
    color: #fdbf12;
    font-family: 'CustomFont';
}

.div3 .grid-container .item4,
.div3 .grid-container .item3,
.div3 .grid-container .item2{
  font-family: "Source Sans Pro";
  padding-left: 70px;
  padding-right: 70px;
  font-size: 28px;
  font-weight: 300;
  box-sizing: border-box;
  padding-bottom: 50px;
}
.center-button {
  background-color: #74b577; /* Background color of the button */
  color: white; /* Text color */
  font-family: "Source Sans Pro";
  border: none; /* Removes default border */
  padding: 10px 20px; /* Padding inside the button */
  border-radius: 25px; /* Rounds the corners to make it look like a pill-shaped button */
  cursor: pointer; /* Changes cursor to pointer on hover */
  font-size: 25px; /* Font size for button text */
  position: absolute; /* Positioning to overlap the image */
  top: 50%; /* Centers the button vertically */
  left: 50%; /* Centers the button horizontally */
  transform: translate(-50%, -50%); /* Adjusts position to truly center the button */
}

.center-button:hover {
  background-color: #45a049; /* Darker shade on hover */
}

.foot{
  
  width: 100%;
  display: grid;
  align-items: center;
  padding-top: 18px;
  text-align: center;
  padding-bottom: 18px;
  color:  black;
  font-family: "Source Sans Pro";
  font-size: 22px;
  background-image: linear-gradient(to top, #dad4ec 0%, #dad4ec 1%, #f3e7e9 100%);
}
.foot a:hover{
  color: black;
  
}
.hayag img {
  /* Set width of the image */
   width: 70%;
   display: block;
   margin: 0 auto; /* Centers the image horizontally */
 }
 
 .gallery1 {
   width: 100%;
   height: 700px; /* Adjust the height as needed */
   background-image: url('site/gal1.png'); 
   background-size: cover;
   background-position: center;
 }
 .gallery2 {
   width: 100%;
   height: 700px; /* Adjust the height as needed */
   background-image: url('site/gal5.jpeg'); 
   background-size: cover;
   background-position: center;
 }
 .gallery3 {
   width: 100%;
   height: 700px; /* Adjust the height as needed */
   background-image: url('site/gal6.jpg'); 
   background-size: cover;
   background-position: center;
 }

@media (max-width:1400px){
  .div3 .grid-container .item4, .div3 .grid-container .item1,
  .div3 .grid-container .item3,
  .div3 .grid-container .item2{
    padding-left: 0px;
    padding-right: 0px;
  }
  .grid-container img{
    margin-right: 15px;
  }
  .heading-link{
    color: #545454;
    font-size: 35px;
    font-weight: 600;
    line-height:30px;
    text-align: center;
    padding-top: 4px;
  }
  #top200, #top100, #top300{
    font-size: 140px;
    line-height: 90px;
    color: #545454;
    font-weight: 700;
    margin-top: 0px;
    margin-bottom: 0px;
  }
}
@media (max-width:1250px){
  .heading-link{
    line-height:33px;
  }
}
@media (max-width:1000px){
  .heading-link{
    line-height:32px;
  }
}
@media (max-width:768px) {
  .slideshow-container {
    margin-top: 0;
    top: 0;
  }
  .plus{
    width: 12%;
    padding-right: 15px;
  }
  .div3 .grid-container .item4, .div3 .grid-container .item1,
  .div3 .grid-container .item3,
  .div3 .grid-container .item2{
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 20px;
  }
  .div3 .grid-container .item3 h4,
  .div3 .grid-container .item2 h4,
  .div3 .grid-container .item4 h4{
    padding-top: 73px;
    line-height: 34px;
  }
  #top200, #top100, #top300{
    font-size: 173px;
    line-height: 82px;
    font-family: 'CustomFont2';
    padding: 40px;
  }
  .number2{
    font-size: 110px;
    line-height: 100px;
    padding-left: 22px;
  }
  .grid-container{
    display: block;
    padding: 15px;
  }.grid-container h4{
    margin: -12px 0 -8px 0;
  }
  .foot{
    font-size: 18px;
  }
  .div3 .grid-container .item1 #davuu1{
    font-size: 100px;
    margin-top: 10px;
    font-weight: 200;
    color: #fdbf12;
    font-family: 'CustomFont';
}
#locat{
  width: 100%;
}
.hayag .center-button{
  font-size: 12px;
}
#davuu2 {
  font-family: "Source Sans Pro";
  font-size: 17px;
  padding-bottom: 5px;
  margin-top: 30px;
  grid-row: 2; /* Positioning the second <a> tag in the second row */
}

}
@media (max-width: 700px) {
  .gallery1 {
      background-image:url('site/gal1_mob.png');  
      height: 500px;
  }
  .gallery2 {
      background-image:url('site/galmob2.png');  
      height: 500px;
  }
  .gallery3{
    background-image: url('site/galmob1.jpg');
    height: 500px;
  }
}

@media (max-width:568px) {
  #top200, #top100, #top300 {
    font-size: 140px;
    line-height: 82px;
    font-family: 'CustomFont2';
  }
  .gallery1 {
    background-image: url('site/gal1_mob.png');
    height: 450px;
  }
  .gallery2 {
    background-image:url('site/galmob2.png');  
    height: 450px;
}
.gallery3{
  background-image: url('site/galmob1.jpg');
  height: 450px;
}
}
@media (max-width:468px) {
  #top200, #top100, #top300 {
    font-size: 110px;
    line-height:70px;
    font-family: 'CustomFont2';
  }
  .number2{
    padding-left: 0;
    font-size: 79px;
    line-height: 0;
  }
}

.div3 .grid-container .item2:hover{
  border-radius: 10px;
  background-color: rgb(245, 234, 219);
}
.div3 .grid-container .item3:hover{
  border-radius: 10px;
  background-color: rgb(245, 234, 219);
}
.div3 .grid-container .item4:hover{
  border-radius: 10px;
  background-color: rgb(245, 234, 219);
}
.div3 .grid-container .item2 h2{
  font-family: "Source Sans Pro";
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}
.div3 .grid-container .item3 h2{
  font-family: "Source Sans Pro";
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

.div3 .grid-container .item4 h2{
  font-family: "Source Sans Pro";
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}


.div3 .grid-container .item5 {
  text-align: center; /* Center-aligns text inside item5 */
   /* Optional: Adds padding around the content */
}

.div3 .grid-container .item5 .hayag {
  position: relative; /* Establishes a positioning context for absolute positioning */
  display: flex;

}



/* Media Query for mobile devices */