@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap");

/* variables */
:root{
  --font-family: 'Roboto',sans-serif;
  --normal-font: 400;
  --bold-font: 700;
  --bolder-font: 900;
  --bg-color: #fcfcfc;
  --primary-color: #250C77;
  --secondary-color: #ED642B;
  --primary-shadow: #8b8eaf;
  --secondary-shadow: #a17a69;
  --bottom-margin: 0.5rem;
  --bottom-margin-2: 1rem;
  --line-height: 1.7rem;
  --transition: 0.3s;
}
/* variables end */

html{
  scroll-behaviour: smooth;
}

/* css reset  */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul{
  list-style-type: none;
}
a{
  text-decoration: none;
  color: var(--bg-color);
}
a:hover{
  cursor: pointer;
  color: var(--secondary-color);
}

body{
  font-family: var(--font-family);
}

/* navigation */
nav{
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--primary-color); 
  padding: 1.5rem 3.5rem;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
}
nav h1{
  color: var(--bg-color);
}
nav h1 sup{
  color: var(--secondary-color);
}
nav a{
  color: var(--bg-color);
  transition: var(--transition);
}
nav a:hover{
  color: var(--secondary-color);
  border-bottom: 2px solid var(--secondary-color);
}

nav ul{
  display: flex;
  gap: 1.9rem;
}
nav ul li{
  font-weight: var(--bold-font);
}

.burger-menu{
  color: var(--bg-color);
  background: transparent;
  border: 0;
  font-size: 2rem;
  cursor: pointer;
  display: none;
}
/* navigation end */

/* hero section */

.hero-section-slider{
  height: 100vh;
  background-size: cover;
  background-image: url(https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Z2FtaW5nfGVufDB8fDB8fA%3D%3D&w=1000&q=80);
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: slider 20s ease-in infinite;
}
.hero-section-slider h2{
  color: var(--bg-color);
  border-bottom: 2.5px solid var(--secondary-color);
  text-shadow: 0 3px 2px var(--secondary-color);
  text-align: center;
  font-size: 2.5rem;
  font-weight: var(--bolder-font);
}
/* ------------------ */
/* about section */
.about{
  background-color: var(--bg-color);
  padding: 1rem 6rem;
}
.about h2{
  text-align: center;
  margin-bottom: var(--bottom-margin-2);
}
.about p{
  color: dodgerblue;
  line-height: var(--line-height);
  padding: 0.4rem;
}
/* ---------------------- */
/* services */
.services{
  background-color: var(--bg-color);
  padding: 32px 0;
  margin-top: 2rem;
}
.services-header{
  text-align: center;
  font-weight: var(--bolder-font);
  margin-bottom: var(--bottom-margin-2);
}
.services-wraper{
  padding: 1rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.service-container{
  flex: 1 1 18.750rem;
  width: 21.875rem;
  padding: 1rem;
  box-shadow: 0 3px 5px var(--secondary-shadow);
}
.service-pic{
  width: 65%;
  height: 60%;
  box-shadow: 0 0 5px var(--primary-color);
  
}
.service-container:nth-child(2) .service-pic{
  width: 50%;
}
.service-title{
  font-weight: var(--bold-font);
  margin-bottom: var(--bottom-margin);
  border-bottom: 2px solid var(--secondary-color);
}
.service-btn{
  color: dodgerblue;
  font-weight: var(--bold-font);
  transition: var(--transition);
}
.service-btn:hover{
  border-bottom: 2px solid var(--secondary-color);
}
/* ------------- */
/* footer */
footer{
  background-color: var(--primary-color);
  padding: 2.5rem;
  margin: 2rem 0 0;
  
}
.first-part{
  color: var(--primary-shadow);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  gap: 2rem;
  margin-bottom: var(--bottom-margin-2);
  border-bottom: 2px solid var(--secondary-color);
}
.first-part h1{
  color: var(--bg-color);
}
.first-part h1 sup{
  color: var(--secondary-color);
}
.second-part{
  margin-top: 0.875rem;
  font-size: 1.2rem;
  color: var(--bg-color);
  text-align: center;
  
}
.second-part span{
  font-size: 1.5rem;
  color: aqua;
}

/*  ----------------------------------------------------------   */
/* slider animation images */

/* ------------------------------------------------------------- */

/* responsive */
@media screen and (max-width: 720px){
/*  navigation  */
  nav{
    padding: 1.5rem 1rem;
  }
  nav ul{
    position: fixed;
    background-color: rgba(0,0,0,0.5);
    flex-direction: column;
    top: 86px;
    left: 10%;
    width: 80%;
    text-align: center;
    transform: translateX(120%);
    transition: transform 5.9s ease-in;
  }
  nav ul li{
    margin: 8px;
  }
  nav ul li a{
    color: aqua;
  }
  .burger-menu{
    display: block;
  }
/*   for showing our menu  we toggle this class to nav*/
  nav ul.show{
    transform: translateX(0);
  }
  
/*  hero section heading  */
  .hero-section h2{
    font-size: 2rem;
    border-bottom: none;
  }
}

@media screen and (max-width: 440px){
/*   footer */
  .first-part{
    flex-direction: column;
  }
}






















.box {
  width: 20%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}
.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid orange;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: orange;
}
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: visible;
  opacity: 1;
}
.overlay:target {
  visibility: hidden;
  opacity: 0;
  display:none
}
.popup { position: relative;
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  
  transition: all 5s ease-in-out; }

.popup .close       { position: absolute; top: 20px; right: 30px; transition: all 200ms;
            font-size: 30px; font-weight: bold; text-decoration: none; color: #333; }
.popup .close:hover { color: orange; }
.popup .content     { max-height: 30%; overflow: auto; }

/*.popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; }*/