@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');   /* ----this font for the quotation section--- */
*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    
}

   /* _____________general classes___________________- */
.space{
  height: 100px;
  position: relative;
  z-index: -9;
  clear: both;
}
.z-order{
  z-index: -9;
  position: relative;
}
.border{
  border: 2px solid#fff;      
  box-shadow:0 15px 40px rgba(0,0,0,.3);    
}
.head-fontsize{
  font-size: 2rem;
}
.text-fontsize{
  font-size: 1.2rem;
}
    /* _____________________________________________ */
  html{
    scroll-behavior:smooth;
  }
  body{
    font-family: sans-serif;
    background: rgb(100,223,223);
    background: linear-gradient(180deg, rgba(100,223,223,1) 0%, rgba(255,255,255,1) 67%); 
    color:#4361ee;
   position: relative;
   z-index: -6;
   

  }
   /* --------------start navbar----------- */
   .navbar {
    /* background-color:#013a63 ; */
    background-color :#4361ee;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    color: azure;
    font-size: 1.5rem;
  }
  .nav-list .list-item {
     /* I set the alignment of  LI items inside the UL tage side by side in the same line  */
    display: inline-block;
    padding: 20px  10px ;  
  
    
  }
  .navbar a {
   color: inherit;
   cursor: pointer;
  
  }
  
  .logo {
    height: 70px;
   
  }
  .menu{
    /* this is the hamburger icon for small devices */
    display: none;
  }
  .menu-line{
        /* this is the hamburger icon for small devices */
    width: 20px;
    height: 4px;
    background-color: azure;
    margin-bottom: 4px;

  }
  .list-item:hover{
    color: aqua;
    cursor: pointer;
  }
  
          /* ----------------------end navbar---------------- */

       /* - --------------------------- start intro to Antarctica------------ -- */
 
.intro-section{
  width: 100%;
  position: relative;
 
}
.antarctica{
  text-align: center;
  text-transform: uppercase;
  font-style: oblique;
  font-size: 4rem;
  margin-top: 5%;

}

.intro-section img{
width: 80%;
margin:10% ;
margin-top: 3%;
margin-bottom: 3%;

}
.intro-section p {
padding: 5%;
padding-top: 0;
width: 60%;
margin: auto;
padding-left: 10%;
justify-content: center;
}
/* -- --------------------------- end intro to Antarctica------------ -- */
 
   /* ------------------ introduction of the quiz section --------- */
   
   .quiz-section {
   width: 100%;
    padding-top: 50px;
   padding: 30px;
   display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
 }
 .quiz-intro{
  padding: 15px;
 }
 #wel{
   text-transform: uppercase;
 }
 .mainbutton button{
  
   border: 6px solid rgba(255, 255,255,0.45);
   padding: 1em 3em;
   border-radius: 50px;
   background-repeat: no-repeat;
   background-size: 100%;
   background-clip: padding-box;
   color: #fff;
   background-image: linear-gradient(90deg,#7b81ec,#8ce0f1);
   filter: blur(0.5px);
   cursor: pointer;
 }
 .mainbutton button:hover{
   background-image: none;
   background-color:  #5e60ce;
 }

 /* -------------end introduction of the quiz section ---------- */
        /* ------------------------------start quiz form style-------- */
 .quiz-form{
   color: azure;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 60%;
   margin: auto;
   padding: 10px;
   background-color: #586f7c; 
   box-shadow:5px 15px 10px  rgba(0,0,0,.25)  ;
   display: none;
   position:absolute;
   top:10%;
   left: 20%;
   z-index: -1;
 }
.quiz-form.display{
  display: flex;
}


 .questiondiv{
  
  background-image: url("https://getwallpapers.com/wallpaper/full/3/0/7/696089-antarctica-wallpaper-2560x1440-cell-phone.jpg");
  background-position: cover;
  overflow: hidden;
  width: 99%;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  padding-left: 5%;
 }
 .questions{
 padding: 15px;
}
 .answers{
   /* ----- this class is for the input tage ---- */
   margin: 7.5px;
   margin-left:15px ;
 }
 .position-btns{
  display: flex;
     width: 90%;
     flex-direction: column;
     align-items: center;
     margin:2% 5% ;
     
 }
 .stylebtn{
   background-color: #586f7c;
   border: solid #586f7c ;
   display: block;
   height: 10%;
   width: 30%;
  padding: 5px ;
   cursor: pointer;
   color: inherit;
 }
 .stylebtn:hover{
   background-color: #5e60ce;
 }
 
#result{
  color: red;
  font-weight: bold;
  
}
    /* ------------------------------end quiz form style-------- */

/* ----------------------------------start floated images section------------- */
 .container {
   width: 90%;
   margin:5% ;
   position: relative;
   padding:2rem ;
  
   /* margin-top: 10%; */
 
   
 }
 .title{
   width: 90%;
   margin: auto;
   margin-bottom:2rem ;
   display: flex;
   align-items: flex-start;
   padding-top: 3%;
   padding-bottom:0;
   
 }

 .container p{
  /* text-align: justify; */
width: 90%;
height: 100%;
  line-height:1.5em;
  overflow: hidden;
  margin: auto;
 

   
 }
 
 .container p>img{
width: 35%;

 }
 .right{
   float: right;
   margin:4% ;
   margin-right: 40px;
   
 }
.left{
  float: left;
  margin: 4%;
  margin-left: 40px;
  margin-top: 4%;
}
.quotation{
  width: 100%;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
 
}
.quotation p{

  line-height: 1.5em;
  width: 50%;
  margin-top: 1rem;
  margin: auto;
  font-style: italic;
  

}
.quotation p::first-letter{
  font-size: 75px;
  font-weight: 700;
  line-height: 60px;
  padding: 4px 8px 0 3px;
    float: left;
    font-family: "Libre Baskerville",Georgia,serif;
   
  
}

/* --------------------------end floated images section-----------------  */
 /* ---------------------- lake section------------------- */
 .first-column{
   width: 90%;
   margin: auto;
   margin-bottom: 1%;
   line-height:1.5em;

   
 }
.lake-container{
  display: flex;
 
}
.lake-text1{
  width: 25%;
  margin: 0% 2% 5% 5%;
  line-height:1.5em;
}
.lake-text2{
  width: 25%;
  margin: 0% 5% 5% 2%;
  line-height:1.5em;
}
.lake-image{
  width: 36%;
}
.lake-image img{

  width: 100%;
  height: 80%;
  margin-top:0%;
  
}
        /* ----------------------end lake section------------------- */
        /* -- ----------------------------------highlights section----------------------- -- */
.Highlights-intro{
  margin: 5% 20%;
  font-style: italic;
  line-height:1.5em;
  /* text-shadow:1px 1px blue; */
  
}
   /* -----bubbles section---- */
   .seals{
    height: 50vh;
    width: 100%;
    margin: auto;
    background-image: url(https://i.pinimg.com/originals/85/e3/61/85e36199d277f494c85931c3e82b9654.jpg);
     background-size:cover ;
    background-position: center;
    overflow: hidden;
   
    }
    .bubbels-text{
      position: absolute;
      left: 0;
      top: -400%;
      width: 30%;
      z-index: -9;
      margin:1% 2%;
      color: azure;
      font-weight: 700;
      text-transform: uppercase;
      font-family: "Libre Baskerville",Georgia,serif;
      
    }
    .bubbels{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    bottom: 0;
                                 
                                   
    }
    .bubbels img{
     width: 50px;
     animation: bubbles-animi 7s infinite;
     animation-timing-function: linear;
    }
                               
    @keyframes bubbles-animi{
     0% {
     transform: translateY(20vh);
     opacity: 1;
     }
                               
    100% {
    transform: translateY(-80vh);
     opacity: 0;
    }
    }
                               
    .bubbels img:nth-child(1){
     animation-delay: .2s;
    width: 22px;
     }
    .bubbels img:nth-child(2){
    animation-delay: 1s;
      width: 70px;
     }
                               
     .bubbels img:nth-child(3){
     animation-delay: .2s;
     width: 22px;
     }
                               
    .bubbels img:nth-child(4){
      animation-delay: .3s;
     width: 50px;
     }
                               
    .bubbels img:nth-child(5){
      animation-delay: 1.5s;
     width: 30px;
      }                         
     .bubbels img:nth-child(6){
     animation-delay: 1.3s;
     width: 15px;
    }
    .bubbels img:nth-child(7){
     animation-delay: 2s;
     width: 60px;
     }
 /* --------------end-bubbles section-------------- */  

.wraper{
 /* position: relative; */
  width: 100%;
 height: 60vh;
               
 }        
.wraper .box{
 position: relative;
 height: 80%;
width: 40%;
margin: 5%;
float: left;
 overflow: hidden;
border-radius: 10px;
               
}
.card1 , .card2, .card3 , .card4{
  
  background-position: center;
  background-size: cover;
  background-color: aqua;
  background-blend-mode: darken;
  filter: blur(5px);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -9;

}
#card1bg , #card2bg , #card3bg ,#card4bg{
  background-position: center;
  background-size: cover;
}
.card1{
  background-image: url(https://images.maennersache.de/pinguine-verschwunden-antar,id=0871b298,b=maennersache,w=1100,rm=sk.jpeg);
}
#card1bg{
  background-image: url(https://images.maennersache.de/pinguine-verschwunden-antar,id=0871b298,b=maennersache,w=1100,rm=sk.jpeg);
}
.card2{
  background-image: url(https://th.bing.com/th/id/Rbab96c7b8523113e2135126ab3e68d94?rik=SQDJWq%2bwZma1zA&riu=http%3a%2f%2fwww.wildlifeworldwide.com%2fimages%2fbanners%2fpolar_antarctica_paradise_bay_iceberg_zodiacs_banner-narrow.jpg&ehk=ry4R8q3PxAq%2bIbt2cx32LGhYH3RCH4qHmSzyNgzO71I%3d&risl=&pid=ImgRaw);
}
#card2bg{
  background-image: url(https://th.bing.com/th/id/Rbab96c7b8523113e2135126ab3e68d94?rik=SQDJWq%2bwZma1zA&riu=http%3a%2f%2fwww.wildlifeworldwide.com%2fimages%2fbanners%2fpolar_antarctica_paradise_bay_iceberg_zodiacs_banner-narrow.jpg&ehk=ry4R8q3PxAq%2bIbt2cx32LGhYH3RCH4qHmSzyNgzO71I%3d&risl=&pid=ImgRaw);
}
.card3{
  background-image: url(https://i.pinimg.com/originals/6b/54/5c/6b545cbf8d109535ec749d30d14d0014.jpg);
}
#card3bg{
  background-image: url(https://i.pinimg.com/originals/6b/54/5c/6b545cbf8d109535ec749d30d14d0014.jpg);
}
.card4{
  background-image: url(https://cloudfront-ap-southeast-2.images.arcpublishing.com/nzme/CLYRXP4TJLEPVGCZ5TCY7AFAS4.jpg);
}
#card4bg{
  background-image: url(https://cloudfront-ap-southeast-2.images.arcpublishing.com/nzme/CLYRXP4TJLEPVGCZ5TCY7AFAS4.jpg);
}
.card-text{
  z-index: -8;
  position: relative;
  height: 80%;
  width: 100%;
  color: azure;
  padding:5%;
  font-size: 1rem;
}
.card-cover{
  position: absolute;
  bottom: 0;
height: 100%;
width: 100%;
z-index: -7;
transition: 0.20s;


}
.card-title{
position: absolute;
bottom: 0;
height: 20%;
width: 100%;
background-color:rgba(245, 234, 234, 0.4);
/* opacity: .4; */
z-index: -6;
display: flex;
align-items: center;
justify-content: start;
padding: 5%;
color: azure;
text-transform: capitalize;

}
/* .title-text{
position: absolute;
bottom: 0;
 z-index: -5;
height: 20%;
width: 100%;
display: flex;
align-items: center;
justify-content: start;
padding: 5%;
color: azure;
} */


.wraper .box:hover .card-cover {
  height: 10%;
  opacity: 0;
  
}

.box:hover{
  cursor: pointer;
}


      /* - ----------------------------------end highlights section----------------------- -- */
      .arrow-up{
        position: sticky;
        bottom: 0;
        float: right;
        border-radius: 10px;
        height: 40px;
        width: 40px;
        background-color:#4361ee;
        opacity: .4;
        z-index: -1;
        margin-right: 10px;
        font-size: 1.5rem;
      }
      .arrow-up a{
        color: azure;
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        padding: 20% 0;
      }


        /* -------------------start footer---------------- */
 
 footer{
  color:#4361ee;
  display: flex;
  flex-direction: column; 
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
 }
 .footer-columns{
  padding: 1%;
 }
 .footer-columns p{
   display: flex;
   align-items: center;
   justify-content: center;
 }
.contact{
border-radius: 50%;
background-color:#4361ee;
height: 30px;
 width: 30px;
text-align: center;
padding-top: 10%;
color: azure;
 }
 footer a{
 color:#4361ee;
 text-decoration: underline;
 

 }
 
 
 /* -----------------------------------end----------------------------------- */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


                 /* -------------------------------media quiries------------------- */
                 @media all and (max-width: 1350px){
                  .lake-container{
                    flex-direction: column;
                  }
                  .lake-text1 ,.lake-text2{
                    width: 90%;
                    margin: auto;
                  }
                  .lake-image{
                   width: 100%;
                 
                 }
                 .lake-image img{
                 
                   width: 60%;
                   margin: 10% 20%;
                   height: 40%;
                   }
                   .card-text{
                    font-size: 0.8rem;
                  } 
                  }
    @media all and (max-width: 850px){
    /* .lake-container{
      flex-direction: column;
    }
    .lake-text1 ,.lake-text2{
      width: 90%;
      margin: auto;
    }
    .lake-image{
     width: 100%;
   
   }
   .lake-image img{
   
     width: 60%;
     margin: 10% 20%;
     height: 40%;
     } */
     .card-text{
      font-size: 0.8rem;
    } 
    }
  @media all and (max-width: 850px){
    .lake-container{
      flex-direction: column;
    }
    .lake-text1 ,.lake-text2{
      width: 90%;
      margin: auto;
    }
    .lake-image{
     width: 100%;
   
   }
   .lake-image img{
   
     width: 60%;
     margin: 10% 20%;
     height: 40%;
     }
     .card-text{
      font-size: 0.8rem;
    } 
    }
  @media all and (max-width: 768px){
    .head-fontsize{
      font-size: 1.5rem;
    }
    .text-fontsize{
      font-size: 1rem;
    }
     /* -----start navbar editing------ */
      .nav-list .list-item {
       padding: 10px 4px;
       font-size: 1rem;
      }
     
        /* -----------end navbar editing--------- */
        .mainbutton button{
          padding: 0.5em 1.5em;
        }
        .quiz-form{
          top:3%;
        }
    /* ------------------editing floated images section------- */
    .container img{
     width: 30%;}
     .quotation p::first-letter{
      font-size: 30px;
      font-weight: 600;
      line-height: 20px;
      
      }
     /* --------------------------end------------------- */
     /* --------------------editing lake section-------------- */
     .lake-container{
      flex-direction: column;
    }
    .lake-text1 ,.lake-text2{
      width: 90%;
      margin: auto;
    }
    .lake-image{
     width: 100%;
   
   }
   .lake-image img{
   
     width: 60%;
     margin: 10% 20%;
     height: 40%;
     
  
   }
     /* --------------------end editing lake section-------------- */
     .wraper .box{
      position: relative;
      width: 46%;
      margin: 2%;
    }
    .card-text{
      font-size: 0.9rem;
    } 
  }





  @media all and (max-width: 499px) {
    .head-fontsize{
      font-size: 1.2rem;
    }
    .text-fontsize{
      font-size: 1rem;
    }
    .space{
      height: 100px;
    }
    .border{
      border: 2px solid#fff;      
      box-shadow:0 7.5px 20px rgba(0,0,0,.3);    
    }
    /* -----start navbar editing------ */
    .navbar{
      flex-direction: column;
    }
    .nav-list .list-item{
      display: block;
      padding: 40px;
    }
    .phlogo {
      width: 100%;
    }
    .logo{
    
      margin-left: 20px;
      margin-top: 5px;
      margin-bottom: 5px;
    }
    .nav-list{
     width: 100%;
     text-align: center;
     display: none;
     top: 85px;
     height: 100vh;
    }

    .menu{
      display: block;
      position: absolute;
      right: 15px;
      top: 30px;
    }
    .menu:hover{
      cursor: pointer;
    }
    .nav-list.active {
    display:block;
     position: absolute;
     top: 85px;
     background-color:#4361ee;
     clip-path: circle(700px at 100% -30%);
    z-index: -1;
    height: 70vh; 
    }
    /* -----------end navbar editing--------- */
    /* ---------------------------intro to Antarctica------------ */
    .intro-section p{
      width: 80%;
      margin: auto;
    }

    /* ------------------ introduction of the quiz section --------- */
   .quiz-section{
     align-items: flex-start;
   }
   .mainbutton{
     display: flex;
     width: 100%;
     flex-direction: column;
     align-items: flex-end;
    }
     .mainbutton button{
       padding: 0.5em 1.5em;
     }
   
    .quiz-intro {
      padding: 15px;
    }
   
   /* ------------------end---------------------------- --------- */
   /* ------------------coding quiz form-------------------------------- */
   .quiz-form{
    top:2%;
    width:100%;
    left: 0%;
  }
   .questions{
    padding: 5px;
   }
  
  .answers{
    /* ----- this class is for the input tage ---- */
    margin: 3px;
   
  }
   .done-button{
     margin: 5px;
   }

   /* --------------------end--------------- */
   /* -------------------------- editing floated images section--------------- */
   .container p{
     clear: both;
   }
   .container p>img{
    width: 80%;
    margin: 10%;

    
     }
   .quotation p::first-letter{
    font-size: 30px;
    font-weight: 600;
    line-height: 20px;
    }
     /* --------------------------end editing floated images section--------------- */

  /* ----------------------editing lake section------------------- */
   .lake-container{
     flex-direction: column;
   }
   .lake-text1 ,.lake-text2{
     width: 90%;
     margin: auto;
   }
   .lake-image{
    width: 100%;
  
  }
  .lake-image img{
  
    width: 80%;
    margin: 10% ;
    height: 40%;
    
 
  }
  /* ----------------------end editing lake section------------------- */
  /* ----------------heiglights editing-------------- */
  .wraper .box{
    position: relative;
    width: 80%;
    margin: 10%;
  }
  .card-text{
    font-size: 0.8rem;
  }
  .card-title{
    height: 15%;}
  
     /* ----------------------editing bubbles size & bubbles section---------------- */
     .seals{
      background-image: url(https://th.bing.com/th/id/R82d924ddb3e3b24bf6187d674b31a91f?rik=iZlqKiVJfurRbw&riu=http%3a%2f%2fwww.nationalgeographic.com%2fcontent%2fdam%2fmagazine%2frights-exempt%2f2017%2f07%2fUnder-Antarctica%2funder-antarctica-weddell-seal-pup.ngsversion.1497363711119.adapt.1900.1.jpg&ehk=7SGOhc8QKXuSEISKBT1ku4d3g4ur9JaUQ%2b%2b6eMqSFbA%3d&risl=&pid=ImgRaw);
    }
    .bubbels-text{
      top: -650%;
    }
     .bubbels img:nth-child(2){
      animation-delay: 1s;
      width: 17px;
    }
     .bubbels img:nth-child(4){
      animation-delay: .3s;
      width: 25px;
    }
    .bubbels img:nth-child(7){
      animation-delay: 2s;
      width: 20px;
    }
    /* ---------------------- end-------------------- */ 
    
    .card-cover{
      display: none;
    }
  }