body{margin:0; 
  height: 100vh;
  background:linear-gradient(to right, rgba(0, 0, 200, 0.5), rgba(0, 0, 0 ,0)), url('photos/hand.jpg'); background-position: center;
background-size: coVER; background-repeat: no-repeat;
padding-bottom: 600px;
font-family: 'Georgia', sans-serif;
background-attachment: fixed;

}

.main-div{display:flex; justify-content: space-evenly; 
  align-items: center;}

/*CSS FOR THE LEFT DIV*/

.left-div{width:38%; height:50vh;
border:none; position:relative; top:5vh; padding-top: 5%;
padding-bottom: 2%; 
margin-bottom: 4%; align-items: center;
overflow: hidden; background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px); border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1),
 inset 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/*STYLNG RIGHT HAND SIDE FIRST*/

.right-div{width:58%; height:45em;
 position:relative; top:10vh;
display:flex; justify-content: space-evenly;
align-items: center; }

/*CSS FOR THE FIRST RIGHT DIV CHILDREN*/

.right-div-a{width:30%; height: 100%; 
   display: flex; flex-direction: column;
   align-items: space-evenly; justify-content: center; gap:20px;
  }

.right-div-a-1{width: 100%; height: 35%; 
  background: url('photos/blink.jpg'); border-radius: 9%; 
background-size: cover; background-position: center;
border:2px solid #87cefa} 

.right-div-a-2{width: 100%; height: 35%;
   background: url('photos/DISMAS.jpg'); border-radius: 9%;
   background-size: 100% 100%; background-position: center;
   border:2px solid #87cefa}

   /*CSS FOR THE SECOND RIGHT DIV AND HER KIDS*/

.right-div-b{width:30%; height: 100%; 
display: flex; flex-direction: column; gap: 20px;}

.right-div-b-1{width: 100%; height: 49%; background: url('photos/hasanat.jpg');
border-radius: 5%;
background-size: cover; background-position: center;
background-repeat: no-repeat; border:2px solid #e412f77e;
transition: transform 0.9s ease-in-out;}

.right-div-b-1:hover{transform: scale(1.3);}

.right-div-b-2{width: 100%; height: 48%; background: url('photos/trophy_with_medal.jpg');
border-radius: 5%;
background-size: cover; background-position: center; 
background-repeat: no-repeat; border:2px solid #f0f;}

/*CSS FOR THE THIRD RIGHT DIV AND HER ONE KID*/

.right-div-c{width: 30%; height: 89%; background:url('photos/owiny.jpg');
background-size: cover; background-position: center;
background-repeat: no-repeat; border:2px solid #87ca0f; border-radius: 5%;}

/*CSS FOR THE ZOOM EFFECT*/
.zoom-effect{transition: transform 0.9s ease-in-out;}

.zoom-effect:hover{transform: scale(1.2);}

/*CSS FOR THE PARAGONS TEXT*/
.text{font-size: 4rem; 
  font-weight: bold;
  font-style: oblique;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00de,
0 0 40px #ff00de; 
animation: flicker 1.5s infinite alternate;}
@keyframes flicker{0%, 19%, 21%, 100%{opacity: 1;} 20%{opacity: 0.8;}}

/*CSS FOR THE HORIZONTAL DIVIDER*/

hr{margin-top: 12%; height: 4px; border: 1px transparent; 
background: linear-gradient(90deg, #fff, #000, #fff);}

/*TIME TO STYLE THE LOWER DIV WITH SEVEN KIDS*/


.lower-div{height:80vh; width: 100%; /*background:url('photos/group_photo_1.jpg');*/
  background-position: center; background-size:100% 100% ;
  background-repeat: no-repeat;
   display: flex; justify-content: space-between;
  }

.small-div-with-video{position: relative; width:30%; overflow: hidden; }

.small-div-with-video video{ z-index:-1; width: 100%; height: 100%;
  object-fit: cover;

  }

.bigger-right-div{width:65%; height: 100%; display: flex; 
  align-items: center; flex-direction: column;
   justify-content: space-around;}

   /*CSS FOR THE TOP RGHT DIV AND ALL HER KIDS*/

.top-div{height: 49%; width: 100%;
display: flex; justify-content: space-between;}

.top-div-1{height: 100%; width: 33%; background:url('photos/app.jpg');
  background-position: center; background-size: contain; background-repeat: no-repeat;
border-radius: 12%;}

.top-div-2{height: 100%; width: 33%;
   background: url('photos/IMG-20250423-WA0015.jpg');
   background-position: center; background-size: cover;
border-radius: 50%;}

.top-div-3{height: 100%; width:33%; background: url('photos/IMG-20240724-WA0086.jpg');
  background-position: center; background-size: contain; background-repeat: no-repeat;
border-radius: 12%;}

/*CSS FOR THE BOTTOM RIGHT DIV AND ALL HER KIDS*/

.bottom-div{height: 49%; width: 100%;
display: flex; justify-content: space-around;}

.bottom-div-1{height: 100%; width: 42%; background: url('photos/brief.jpg');
 background-position: center; background-size: cover; background-repeat: no-repeat;}


.bottom-div-2{height: 100%; width: 35%; background: url('photos/sheila.jpg');
  background-position: center; background-size: contain; background-repeat: no-repeat;}


.bottom-div-3{height: 100%; width: 22%; background: url('tiktok.jpg');
background-position: center; background-size: cover; background-repeat: no-repeat;}

/* CSS FOR THE SECOND LOWER DIV AND ALL HER CHILDREN*/



/*                                                      *\
| CSS FOR THE MOBILE EXPRIENCE OF THE PARAGONS GALLERY    |
\*                                                      */

@media(max-width:610px){
  .main-div{display:flex; justify-content: space-evenly; 
    align-items: center; flex-direction: column;}
  
  /*CSS FOR THE LEFT DIV ON A SMALLER SCREEN*/
  
  .left-div{width:95VW; height:10vh;
  border:none; position:relative;
  padding-bottom: 2%;
  margin-bottom: 1%; 
  overflow: hidden;
  z-index: 1; 
  display: flex;
  justify-content: space-around;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(1px); 
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1),
   inset 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
  }

  /*CSS FOR THE PARAGONS TEXT ON A SMALLER SCREEN OF COURSE*/
  .text{font-size:25px; 
  font-weight: bold;
  font-style:normal;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 10px #ff00de,
0 0 10px #ff00de; 
animation: flicker 1.5s infinite alternate;}
@keyframes flicker{0%, 19%, 21%, 100%{opacity: 1;} 20%{opacity: 0.8;}}

  .smaller-text{font-size:20px; 
  font-weight: bold;
  font-style:normal;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 10px #ff00de,
0 0 10px #ff00de; 
animation: flicker 1.5s infinite alternate;}
@keyframes flicker{0%, 19%, 21%, 100%{opacity: 1;} 20%{opacity: 0.8;}}

/*STYLNG RIGHT HAND SIDE FOR SMALLER SCREENS */

  .right-div{width:95vw; height:98em;
  position:relative; top:10vh;
 display:flex; justify-content: space-evenly;
 flex-direction: column;
 align-items: center; }
 
 /*CSS FOR THE FIRST RIGHT DIV CHILDREN*/
 
 .right-div-a{width:99%; height: 15%; 
    display: flex; 
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 20px;
   }
 
 .right-div-a-1{width: 100%; height: 100%; 
   background: url('photos/blink.jpg');
    border-radius: 9%; 
 background-size: cover; 
 background-position: center;
 border:2px solid #87cefa} 
 
 .right-div-a-2{width: 100%; height: 100%;
    background: url('photos/DISMAS.jpg'); border-radius: 9%;
    background-size: 100% 100%; background-position: center;
    border:2px solid #87cefa}

/*CSS FOR THE SECOND RIGHT DIV AND HER KIDS FOR SMALLER SCREENS*/

.right-div-b{width:99%; height: 30%; 
  display: flex; flex-direction: row; gap: 20px;
margin-bottom: 20px;}
  
  .right-div-b-1{width: 100%; height: 100%; background: url('photos/hasanat.jpg');
  border-radius: 5%;
  background-size: cover; background-position: center;
  background-repeat: no-repeat; border:2px solid #e412f77e;
  transition: transform 0.9s ease-in-out;}
  
  .right-div-b-1:hover{transform: scale(1.3);}
  
  .right-div-b-2{width: 100%; height: 100%; 
    background: url('photos/trophy_with_medal.jpg');
  border-radius: 5%;
  background-size: cover; background-position: center; 
  background-repeat: no-repeat; border:2px solid #f0f;}
  
  /*CSS FOR THE THIRD RIGHT DIV AND HER ONE KID ON SMALLER SCREENS*/
  
  .right-div-c{width: 99%; height: 28%; background:url('photos/owiny.jpg');
  background-size: cover; background-position: center;
  background-repeat: no-repeat; border:2px solid #87ca0f; border-radius: 5%;}
  

/*TIME TO STYLE THE LOWER DIV WITH SEVEN KIDS TO ALIGN PERFECTLY ON SMALLER SCREENS*/


.lower-div{height:200vh; width: 100vw;
   display: flex; 
   justify-content: space-around;
   flex-direction: column;
   margin-top: 30px;
   background: url(photos/background-image-1.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
  }

.bigger-right-div{width:98vw; height: 100%; display: flex; 
  align-items: center; 
  flex-direction: column;
   justify-content: space-around;}

   /*CSS FOR THE TOP RGHT DIV AND ALL HER KIDS ON SMALLER SCREENS*/

.top-div{height: 100%; width: 100%;
display: flex; 
flex-direction: column;
justify-content: space-around;
margin-bottom: 20px; 
margin-top: 20px;}

.top-div-1{height: 100%;
   width: 100%; background:url('photos/group-photo-3.jpg');
  background-position: center; background-size: cover;
  margin-top: 20px;
  background-repeat: no-repeat;
}

.top-div-2{height: 100%; width: 100%;
  background: url('photos/group_photo_1.jpg');
  background-position: center;
   background-size: cover; background-repeat: no-repeat; margin-top: 20px;
}

.top-div-3{height: 100%; width:100%; background: url('photos/group_photo_2.jpg');
 background-position: center; 
 background-size: cover; background-repeat: no-repeat;
margin-top: 20px;}

/*CSS FOR THE BOTTOM RIGHT DIV AND ALL HER KIDS ON SMALLER SCREENS*/

.bottom-div{height: 100vh; width: 100%;
display: flex; justify-content: space-around; 
margin-bottom: 20px;}

.bottom-div-1{height: 70%; width: 49.5%; background: url('photos/Alan.jpg');
background-position: center; background-size: cover;
 background-repeat: no-repeat; margin-top: 20px;}


.bottom-div-2{height: 70%; width: 49.5%; background: url('photos/sheila.jpg');
 background-position: center; background-size: cover;
 margin-top: 20px; 
 background-repeat: no-repeat;}


.bottom-div-3{ height: 0%; width: 0%; background: url('tiktok.jpg');
background-position: center; background-size: cover;
 background-repeat: no-repeat; }

 /*CSS FOR THE SECOND LOWER DIV AND HER KIDS ON SMALLER SCREENS*/
 .lower-div-2{background: url('photos/background-image-3.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: repeat;
height: 100vh; width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border-radius: 5px;
border: none;}

/*STYLNG DIV WITH EDITH VIDEO*/

  .lower-div-2 :nth-child(1){
    position: relative;
  height: 59%;
   width: 100%;
   overflow: hidden;
  border-radius: inherit;}
  #anita-video{position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index:1;
}

/*STYLING ILLAHS DIV*/

  .lower-div-2 :nth-child(2){height:36%; width:100%;
  background: url('photos/illah-1.jpg');
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;}


/*STYLING LOWER-DIV-3 AND ALL HER FOUR CHLDREN*/
    .lower-div-3{height: 200vh;
      width: 100vw;
    background:none ;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 15px;}
    
    .lower-div-3 :nth-child(1){height: 22%;
    width:100%;
  background:url('photos/Dankyathumba-1.jpg');
  background-position: inherit;
  background-size: inherit;
  background-repeat: inherit;
  border-radius: inherit;}

    .lower-div-3 :nth-child(2){height: 25%;
    width:100%;
    background:url('photos/sulphyne-1.jpg');
    background-position: inherit;
    background-size: inherit;
    background-repeat: inherit;
    border-radius: inherit;}

    .lower-div-3 :nth-child(3){height: none;}

    .lower-div-3 :nth-child(4){height: 25%;
    width: 100%;
  background: url('photos/illah-2.jpg');
  background-position: inherit;
  background-size: inherit;
  background-repeat: inherit;
  border-radius: inherit;}

    .lower-div-3 :nth-child(5){height: 25%;
    width: 100%;
    background: url('photos/illah-and-aliya-1.png');
    background-position: inherit;
  background-size: inherit;
  background-repeat: inherit;
  border-radius: inherit;
}

.lower-div-4{background: ul('photos/background-image.jpg');
height: 400vh; width: 100vw;
border-radius: 15px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.lower-div-4 :nth-child(1){background:url('photos/ishaka-crew-1.jpg');
height: 9%; width: 100%;
border-radius: inherit;
background-position: center;
background-repeat: no-repeat;
background-size: cover;}

.lower-div-4 :nth-child(2){background: url('photos/ashoka-1.jpg');
height: 17%; width: 100%;
border-radius: inherit;
background-position: center;
background-repeat: no-repeat;
background-size:cover;
border: 2px solid black;}

.lower-div-4 :nth-child(3){background: url('photos/roshim.jpg');
height: 12%; width: 100%;
border-radius: inherit;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 2px solid grey;}

.lower-div-4 :nth-child(4){background:url('photos/dan-and-amon.jpg');
height: 10%; width:100%;
border-radius: inherit;
background-size: cover;
background-position: center;
background-repeat: no-repeat;}

.lower-div-4 :nth-child(5){background: url('photos/ishaka-crew.jpg');
height: 10%; width: 100%;
border-radius: inherit;
background-size: cover;
background-position: center;
background-repeat: no-repeat;}

.lower-div-4 :nth-child(6){background: url('photos/edmand-and-edith.jpg');
height: 14%; width: 100%;
border-radius: inherit;
background-size: cover;
background-position: center;
background-repeat: no-repeat;}

.lower-div-4 :nth-child(7){background: url('photos/dangilbert-with-ball.jpg');
height: 13%; width: 100%;
border-radius: inherit;
background-size: cover;
background-position: center;
background-repeat: no-repeat;}

.lower-div-4 :nth-child(8){
  background: url('photos/league-jersey.jpg');
  height: 12%;
  width: 100%;
  border-radius: inherit;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.last-div-containing-copyright{
  height: 20vh;
  width: 100vw;
  display: flex;
  background: radial-gradient(circle at 20% 20%,
   #1a1a2e 0%,
   #16213e 20%,
   #0f044c 50%,
   #000000 100%);
  flex-direction: column;
  justify-content: flex-end;

}

.footer{font-size: 1em;
color: white;
}


}

/*CSS FOR THE NEW INDEX FILE*/



/* GENERAL PAGE STYLE */
:root {
  --crimson: #A51C30;
  --navy: #012169;
  --gold: #FFD700;
  --cream: #F9F6EE;
}



@media (max-width: 600px) {
  h1 {
    font-size: 1.5rem;
}
}
h2,h3 {
  margin-top: 10%;
  margin-bottom: 10px;
  color: whitesmoke;
}
.subtitle {
  font-style: italic;
  margin-top: 0.5rem;
  color: whitesmoke;
}
/* HEADER AND NAVIGATION */
header {
  width: 100vw;
}

.navbar {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding:4% 10%;
  background-color: #002244;
  position: sticky;
  top: 0;
  box-shadow: 0px 5px 15px rgba(0,0,0,0.3);
}

.logo {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 2px;
  display: flex;
  justify-content: center;
  padding: 3%;
  position: relative;
  background-color: #003366;
  color: white;
  box-shadow: 0px 5px 15px rgba(0,0,0,0.3);
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  gap:20px;
  margin: 0;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s;
}

nav ul li a:hover {
  color: #66a6ff;
}

/* MAIN TITLE */
h1 {
  margin-top: 20px;
  font-size:40px;}

/* SEARCH BAR STILL UNDER DEVELOPMENT*/
/*

#searchInput {
  margin-top: 15px;
  padding: 12px 20px;
  width: 60%;
  max-width: 500px;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  outline: none;
  transition: 0.3s;
}

#searchInput:focus {
  box-shadow: 0px 0px 10px #66a6ff;
}

*/

/* CARD CONTAINER */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 40px;
}

/* CARD STYLE */
.card {
  width: 250px;
  height: 350px;
  margin: 20px;
  perspective: 1000px;
  border-radius: 15px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out;
  border: 2px solid #ffffff33; /*white with a slice transparency */
  border-radius: 15px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur (10px);
  transition: transform  0.3s ease,box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0px 10px 25px rgba(0,0,0,0.3);
}

.inner-card {
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.card:hover .inner-card {
  transform: rotateY(180deg);
}

.front, .back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 15px;
  overflow: hidden;
}
.font {
  background: white;
}
.front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.back {
  background: #003366;
  color: white;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.back h3 {
  margin-bottom: 10px;
  font-size: 24px;
}

.back p {
  font-size: 16px;
  margin-bottom: 20px;
}

/* SOCIAL BUTTONS */
.social-buttons {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25D366;
  padding: 10px 15px;
  border-radius: 30px;
  color: white;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s;
}

.social-link i {
  margin-right: 8px;
}

.social-link.whatsapp {
  background-color: #25D366;
}

.social-link.whatsapp:hover {
  background-color: #128C7E;
}

.social-link.instagram {
  background-color: #E1306C;
}

.social-link.instagram:hover {
  background-color: #C13584;
}

/* RESPONSIVE DESIGN */
@media screen and (max-width: 768px) {
  .navbar {
      flex-direction: row;
  }
  nav ul {
      flex-direction: row;
      gap: 10px;
      margin-top: 10px;
  }
  #searchInput {
      width: 80%;
  }
}


/*CSS FOR THE LOGIN FORM*\
|*                       |
\*                      */

.major-div{width:100%;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}

.login-container{width:min(85vw, 600px); height:min(65vh, 700px);
position:fixed;
display: flex;
flex-direction: column;
  justify-content:space-around;
  align-items: center;
  margin: 20px;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  perspective:1000px;
  border-radius: 15px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
  border: 3px solid #ffaffb33; /*white with a slice transparency */
  border-radius: 15px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
}

.login-text{font-size: 3.5rem; 
  color:#434343;
  font-weight: bold;
  font-style: oblique;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00de,
0 0 40px #ff00de; 
animation: flicker 1.5s infinite alternate;}
@keyframes flicker{0%, 19%, 21%, 100%{opacity: 1;} 20%{opacity: 0.8;}
}

input{display:block;
width:100%;
margin-top: 8px;
margin-bottom: 25px;
background: transparent;
border:2px dotted rgb(155, 247, 17);
color: #fff;
}

#login-button{background: none; 
height: 15%;
width: 100%;
color: white;
font-size:1em;
}

.sign-up, .back-to-home{text-decoration: none;
color:yellow;}

.back-to-top{ 

color: white;
height: 30px;
width: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 4%;
right: 0;
background: rgba(100, 100, 255, 0.1);
  backdrop-filter: blur(-2px);
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
  border: 3px solid #ffaffb33; /*white with a slice transparency */
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);

}
.T{color: white;
text-decoration: none;}