@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}



h1, h2 {
  Font-Family: 'Cormorant Garamond', Serif;
  Font-Size: 55px;
}

p {
  Font-Family: 'Fira Sans', Sans-Serif;
  Font-Size: 15px; 
}

body {
  background-image: url(../media/7.JPG);
  background-position: center;
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  height: 2150px;
}

@media (min-width: 768px)  and (orientation: landscape) {
  body {
    height: 100vh;
  }
}

/* grid container */
.containerMain {
  display: grid;
  grid-template-columns: repeat(24, 1fr) ;
  grid-template-rows: repeat(2, 1fr) repeat(14, 80px) repeat(2, 1fr);
  height: 2150px;
  width: 100%;
}
/* grid container for desktop */
@media (min-width: 768px)  and (orientation: landscape) {
  .containerMain {
    display: grid;
    grid-template-columns: repeat(2, 1fr) repeat(18, 55px) repeat(2, 1fr) ;
    grid-template-rows: repeat(2, 1fr) repeat(14, 35px) repeat(2, 1fr);
    height: 100vh;
  }
}


/* home icon */
.home {
  grid-column: 6/ span 2;  
  grid-row: 11 / span 1;
  z-index: 5;
  margin: 0%;
  padding: 25px 20px;
  text-align: left;
  -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 4s; /* Firefox < 16 */
   -ms-animation: fadein 4s; /* Internet Explorer */
    -o-animation: fadein 4s; /* Opera < 12.1 */
       animation: fadein 4s;
}
.homeIcon {
  margin: 0%;
  height: 30px;
  padding: 4px 2px 4px 2px;
}

@media (min-width: 768px)  and (orientation: landscape) {
  .home {    
    grid-column: 18 / span 2;  
    grid-row: 5 / span 2;
    text-align: right;
    padding: 17px;
    display: inline-block;
  }
  .homeIcon {
    height: 25px;
    padding: 0px;
  }
}


.socialIcon {
  height: 30px;
  padding: 2px;  
  margin-bottom: -9px;
}
.mailIcon, .phoneIcon {
  height: 20px;
  padding: 2px;  
  margin-bottom: -4px;
}
/* social icons on the top right of the main box  */
@media (min-width: 768px) and (orientation: landscape) {
  .socialIcon {
    height: 25px;
    padding: 2px;
    margin-bottom: -10px;
  }
  .mailIcon, .phoneIcon {
    height: 15px;
  }
}

/* main box */
/* for phone /ipad */
.item1 {
  grid-column: 6/ span 14;
  grid-row: 11 / span 6;
  background-color: #9FBFBCd7;
  color: black;
  margin: 0%;
  padding: 0px 20px;


       -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}
.item1 h1 {
  margin: 40px 0% 0% 0%;
  padding: 13px 5px 15px 5px;
  text-align: center;
  font-size: 55px;
  letter-spacing: 2px;
  transition: background-color 2s;
}
.item1 p {
  margin: 0%;
  padding: 13px 15px 13px 15px;
  text-align: justify;
  font-size: 25px;
  line-height: 35px;
}
.social img{
  margin-left: 60px;
}

/* for desktop */
@media (min-width: 768px) and (orientation: landscape) {
  .item1 {
    grid-column: 11/ span 9;
    grid-row: 5 / span 9;
    padding: 30px 20px 30px 30px;
  }
  .item1 h1 {
    margin: 0%;
    padding: 0px 30px 0px 40px;
    font-size: 35px;
  }
  .item1 p {
    padding: 4px 30px 0px 40px;
    line-height: 30px;
    font-size: 16px;
  }
  #contactTxt {
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .mobile {
    display: none;
  }
}


/* contact box on the right or bottom in mobile version */
.item3 {
  grid-column: 6 / span 14;
  grid-row: 2 / span 6;
  color: black;
  background-color: #a3a2a2cc  ;
  font-size: 18px;
  font-family: 'Cormorant Garamond', Serif;
  transition: background-color 2s;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s; /* Firefox < 16 */
   -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
       animation: fadein 2s;
}
.item3:hover {
  background-color: #828f92f6;
}
.item3 h1, .item3 h2 {
  margin: 40px 0% 0% 0%;
  padding: 18px 5px 18px 5px;
  text-align: center;
  font-size: 55px;
  letter-spacing: 2px;
}
/* for desktop */
@media (min-width: 768px) and (orientation: landscape){
  .item3 {  
    grid-column: 5/ span 7;
    grid-row: 4 / span 12;
    margin: 0%;
    padding: 40px;
    line-height: 16px;
    Font-Family: 'Fira Sans', Sans-Serif;    
  }  
  .item3 h1, .item3 h2 {
    margin: 0% 0% 0% 0px;
    text-align: center;
    padding: 0% 0% 30px 0%;
    font-size: 40px;
    letter-spacing: 3px;
  }
}

.contactForm {
  background-color: transparent;
}
label, input, textarea {
  display: block;
  margin: 20px 0px 20px 90px;
  padding: 9px 3px;
  Font-Family: 'Fira Sans', Sans-Serif;
  font-size: 16px;
  width: 400px;
  line-height: 22px;
  border: none;
  color: black;
}
input, textarea {
  background-color: #ffffff75;
}

::placeholder {
  color: rgba(0, 0, 0, 0.753);
}
#message {
  height:110px;
}
.contactSubmit {
  margin: 40px 0px 0px 222px;
  background-color: rgba(255, 255, 255, 0.712);
  width: 140px;
  Font-Family: 'Cormorant Garamond', Serif;
  font-size: 20px;
  letter-spacing: 3px;
}
/* for desktop */
@media (min-width: 768px) and (orientation: landscape){
  label, input, textarea {
    margin: 10px 0px 3px 32px;
    padding: 9px 3px;
    Font-Family: 'Fira Sans', Sans-Serif;
    font-size: 16px;
    width: 240px;
    line-height: 17px;
  }  
  #message {
    height: 90px;
  }
  .contactSubmit {
    margin: 20px 0px 0px 85px;
    width: 140px;
    font-size: 25px;
    letter-spacing: 3px;
  }
}
.foot {
  grid-column: 1 / span 24;
  grid-row: 24 / span 1;
  background-image: linear-gradient(to bottom, #c9d2d300, #d9d2b0a6);
  /* background-image: linear-gradient(to bottom, #c9d2d300, #705838ca); */
  color: black;
  text-align: center;
}
.footerTxt {
  padding: 5% 0% 0% 0%;
  /* font-weight: bold; */
  font-size: 20px;
}
#sigImage {
  height: 50px;
  display: inline-block;
  margin-bottom: -1%;
}
@media (min-width: 768px)  and (orientation: landscape) {
  .foot {
    display: none;
  }
}