/* main css */
body{
    background-color: black;
    font-family: "Akaya Telivigala", serif;
    font-weight: 400;
}

main, section, div, img, button{
    position: absolute;
}

main{
    width: 1920px;
    height: 1080px;
    background-color: rgb(250, 250, 247);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

section{
    width: 100%;
    height: 100%;
    display: none;
}

/* >>>>>>>>>>>>>>>    screen 1 Start     >>>>>>>>>>>>>>>> */
#screen1{
    display: block;
}

.frame{
    left: 730px;
    top: 210px;
    display: none;
}

#pizza{
    left: 1150px;
    top: 750px;
}

#hadeline-bg {
    position: relative; 
    left: 3px;
    top: 0; 
}

#boy{
    width: 250px;
    left: 506px;
    top: 500px;
}

#hat{
    width: 200px;
    left: 390px;
    top: 385px;
}

#text{
    width: 410px;
    left: 80px;
    top: 75px;
}

#flag{
    width: 380px;
    left: 440px;
    top: 610px;
}

#art-pizza{
    width: 200px;
    left: 325px;
    top: 725px;
 
}


#paper{
    display: block;
}
.intro-container{
    width: 550px;
    height: 550px;
    top: 50px;
    left: 750px;
    padding: 5px 5px;
    position: absolute;
    
}

.intro-container div,
.intro-container button{
    position: static;
}

.learn-more-txt{
    font-size: 35px;
    font-weight: 700;
    color: #0e0e0e;
    margin-top: 5px;
    margin-left: 50px;
}

button{
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    outline: none;
    padding: 0;
}

.to-screen-btn{
    display: flex;
    width: 390px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.8);
    border: solid 1px #0075bf ;
    border-radius: 5px;
    margin-top: 20px;
    overflow: hidden;
}

.to-screen-btn > div:first-child{
    padding: 10px 0px;
    font-size: 25px;
    font-weight: 600;
    color: #ff0000;
}

.to-screen-btn > div:last-child{
    width: 60px;
    height: 80px;
    background-color:#fbd80f;
    color: #0a0a0a;
    font-size: 52px;
    transform: translateY(-2px);
    opacity: 0.8;
}

.click-through{
    pointer-events: none;
}

#start-btn{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    padding:100px;
    background-image:url(../img/pizza-bg.jpg) ;
   background-repeat: no-repeat;
    

}
.start-pizza{
    top: 445px;
    left: 880px;
}

#circle-button {
   position: absolute;
    width: 320px;
    height: 320px;
    top: 380px;
    left: 790px;
    
  }

  #start-tittle{
    position: absolute;
    font-size: 5.5rem;
    top: 130px;
    color: #b22222;
    
  }
.screen img{
    display: block;
}

/* .screen p{
    position: absolute;
    left: 910px;
    top: 300px;
    font-size: 35px;
    font-weight: 700;
    color:#0075bf;
} */


 /* >>>>>>>>>>>>>>>    back Button   >>>>>>>>>>>>>>>> */

#back-btn {
    width: 60px;
    height: 100px;
    background-color:#fbd80f;
    color: #0a0a0a;
    border-radius: 0 4px 4px 0; 
    
    font-size: 74px;
    opacity: 0.75;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-content: center;
    line-height: 1;
 }

  /* >>>>>>>>>>>>>>>    screen 1 end     >>>>>>>>>>>>>>>> */   


   /* >>>>>>>>>>>>>>>    screen 2 start     >>>>>>>>>>>>>>>> */   

  


  #screen2{
   background-color: rgb(250, 250, 247);
   background-image:url(../img/bg_2_sn.png) ;
   overflow: hidden;
  }

  #line1{
   width: 171px;
   height: 109px;
   top: 299px;
   left: 297px;
  }

  #line2{
    width: 100px;
    height: 67px;
    top: 317px;
    left: 675px;
   }

   #line3{
    width: 188px;
    height: 62px;
    top: 218px;
    left: 988px;
   }

   #line4{
    width: 132px;
    height: 63px;
    top: 258px;
    left: 1342px;
   }
   #line5{
    width: 276px;
    height: 209px;
    top: 435px;
    left: 1406px;
   }
   #line6{
    width: 171px;
    height: 28px;
    top: 489px;
    left: 1026px;
   }
   #line7{
    width: 367px;
    height: 137px;
    top: 568px;
    left: 462px;
   }
   #line8{
    width: 463px;
    height: 129px;
    top: 799px;
    left: 403px;
   }
   #line9{
    width: 178px;
    height: 57px;
    top: 820px;
    left: 1119px;
   }


   #img1{
    width: 203px;
    height: 209px;
    top: 271px;
    left: 467px;
    cursor: pointer;
   }
   
   .imgtxt01{
    position: relative;
    color: #000;
    font-size: 22px;
    top: 201px;
    left: 407px;
   }

   .imgtxt02{
    position: relative;
    color: #000;
    font-size: 22px;
    top: 64px;
    left: 690px;
   }

   #img2{
    width: 220px;
    height: 219px;
    top: 174px;
    left: 770px;
    cursor: pointer;
   }
 
   #img3{
    width: 221px;
    height: 251px;
    top: 80px;
    left: 1137px;
    cursor: pointer;
   }
   .imgtxt03{
    position: relative;
    color: #000;
    font-size: 22px;
    top:-30px ;
    left: 1137px;
   }

   #img4{
    width: 186px;
    height: 175px;
    top: 265px;
    left: 1471px;
    cursor: pointer;
   }

   .imgtxt04{
    position: relative;
    color: #000;
    font-size: 22px;
    top:40px ;
    left: 1471px;
   }

   #img5{
    width: 321px;
    height: 241px;
    top: 403px;
    left: 1108px;
    cursor: pointer;
   }

   .imgtxt05{
    position: relative;
    color: #000;
    font-size: 22px;
    top: 180px ;
    left: 1110px;
    cursor: pointer;
   }

   #img6{
    width: 214px;
    height: 227px;
    top: 458px;
    left: 831px;
    cursor: pointer;
   }
   .imgtxt06{
    position: relative;
    color: #000;
    font-size: 22px;
    top: 210px ;
    left: 760px;
   }

   #img7{
    width: 224px;
    height: 188px;
    top: 618px;
    left: 241px;
    cursor: pointer;
   }

   .imgtxt07{
    position: relative;
    color: #000;
    font-size: 22px;
    top: 280px ;
    left: 260px;
    
   }

   #img8{
    width: 240px;
    height: 250px;
    top: 788px;
    left: 880px;
    cursor: pointer;
   }
   .imgtxt08 {
    position: relative;
    color: #000;
    font-size: 22px;
    top: 350px ;
    left: 700px;
   }

   #img9{
    width: 307px;
    height: 176px;
    top: 787px;
    left: 1287px;
  
   }

   /* #tap-img{
    top: 50px;
    left: 1500px;
    display: block;
    margin: auto;
    cursor: pointer;
    animation: yoyoRotate 1.5s ease-in-out infinite alternate;
   } */

   #tap-text{
    font-size: 3.3rem;
    color: #d20505;
    top: 95px;
    left: 1440px;
    /* transform: rotate(20deg); */
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
    transition: all 0.3s ease-in-out;
   }
   

   @keyframes yoyoRotate {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(13deg); }
    100% { transform: rotate(0deg); }
}

   .History{
    font-size: 7.5rem;
    margin-left: 90px;
   }

   ul li {
    font-size: 1.4rem;
    padding: 20px 15px;
    background: rgba(255, 255, 255, 0.1); /* Light transparent background */
    color: rgb(12, 12, 12);
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}

.ingredients .ingredients1 {
    font-size: 1rem;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.1); /* Light transparent background */
    color: rgb(12, 12, 12);
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}

ul li::before {
    /* content: "🍕";  */
    font-size: 1.5rem;
    margin-right: 10px;
}

/* ul li:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(5px);
} */

.Naples01{
    color: #ff0000;
   
}

.Iconic1{
    color: #ff0000;
    padding: 20px 0; 

}
.Iconic{
    padding: 20px 0; 
}
/* Pizza List */
.pizza-list {
    list-style: none;
    padding: 0;
    font-size: 1.2rem;
    text-align: left;
}

/* List Items */
.pizza-item {
    background: rgba(255, 0, 0, 0.1);
    border-left: 5px solid #b22222;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
}

/* Highlighted Ingredients */
.highlight {
    font-weight: bold;
    color: #d30000;
}

/* Flag Pizza Sub-list */
.flag-pizza {
    list-style: none;
    padding-left: 20px;
    margin-top: 8px;
}

.flag-item {
    background: rgba(46, 125, 50, 0.2);
    border-left: 5px solid #2e7d32;
    padding: 8px;
    margin-top: 5px;
    border-radius: 6px;
}


.deep-dish-details {
    list-style: none;
    padding-left: 20px;
    margin-top: 8px;
}

.deep-dish-item {
    background: rgba(46, 125, 50, 0.2);
    border-left: 5px solid #2e7d32;
    padding: 8px;
    margin-top: 5px;
    border-radius: 6px;
}


.frozen-pizza-details {
    list-style: none;
    padding-left: 20px;
    margin-top: 8px;
}

.frozen-pizza-item {
    background: rgba(46, 125, 50, 0.2);
    border-left: 5px solid #2e7d32;
    padding: 8px;
    margin-top: 5px;
    border-radius: 6px;
}

.pizza-chain-details {
    list-style: none;
    padding-left: 20px;
    margin-top: 8px;
}

.pizza-chain-item {
    background: rgba(46, 125, 50, 0.2);
    border-left: 5px solid #2e7d32;
    padding: 8px;
    margin-top: 5px;
    border-radius: 6px;
}


      /* >>>>>>>>>>>>>>>    Screen 2 End     >>>>>>>>>>>>>>>> */
      
      


      /* >>>>>>>>>>>>>>>    Screen 3 start     >>>>>>>>>>>>>>>> */ 

      #screen3{
        background-color: rgb(250, 250, 247);
        background-image:url(../img/screen2/bg_3pag.jpg) ;
       }


       #tittle-tag{
        top: 22px;
        left: 507px;
       }

       #pizza-tag{
        top: 67px;
        left: 644px;
       }

       #man_mic{
        top: 360px;
        left: 655px;
       }

       #peparoni{
        top: 392px;
        left: 119px;
        cursor: pointer;
       }

       #hawain{
        top: 592px;
        left: 450px;
        cursor: pointer;
       }


       #masroom{
        top: 792px;
        left: 54px;
        cursor: pointer;
       }

       #chesses{
        top: 360px;
        left: 1560px;
        cursor: pointer;
       }
       #mardira{
        top: 596px;
        left: 1240px;
        cursor: pointer;
       }
       #seafood{
        top: 816px;
        left: 1570px;
        cursor: pointer;
       }

       #container1{
        top: 456px;
        left: 217px;
       }

       #container2{
        top: 676px;
        left: 138px;
       }
       #container3{
        top: 890px;
        left: 210px;
       }
       #container4{
        top: 436px;
        left: 1236px;
       }

       #container5{
        top: 679px;
        left: 1330px;
       }
       #container6{
        top: 892px;
        left: 1237px;
       }

       #scn-text-1{
        font-size: 4rem;
        top: 386px;
        left: 318px;
       }

       #scn-text-2{
        font-size: 4rem;
        top: 605px;
        left: 200px;
       }
      
       #scn-text-3{
        font-size: 4rem;
        top: 828px;
        left: 325px;
       }

       #scn-text-4{
        font-size: 4rem;
        top: 375px;
        left: 1355px;
       }

       #scn-text-5{
        font-size: 4rem;
        top: 605px;
        left: 1455px;
       }

       #scn-text-6{
        font-size: 4rem;
        top: 825px;
        left: 1359px;
       }

       #scn-text-7{
        font-size: 2rem;
        top: 1010px;
        left: 739px;
       }

       #scn-text-11{
        font-size: 1.5rem;
        top: 469px;
        left: 318px;
        color: aliceblue;
       }
       #scn-text-21{
        font-size: 1.5rem;
        top: 692px;
        left: 179px;
        color: aliceblue;
       }

       #scn-text-31{
        font-size: 1.5rem;
        top: 906px;
        left: 329px;
        color: aliceblue;
       }
       #scn-text-41{
        font-size: 1.5rem;
        top: 449px;
        left: 1296px;
        color: aliceblue;
       }
       #scn-text-51{
        font-size: 1.5rem;
        top: 694px;
        left: 1458px;
        color: aliceblue;
       }
       #scn-text-61{
        font-size: 1.5rem;
        top: 908px;
        left: 1282px;
        color: aliceblue;
       }

       /* >>>>>>>>>>>>>>>    Screen 3 End     >>>>>>>>>>>>>>>> */


         /* >>>>>>>>>>>>>>>    Screen 4 start     >>>>>>>>>>>>>>>> */

     
        /* Main Container */
        .container01 {
            background: url('../img/screen3/main-bg.png') no-repeat center center;
            background-size: cover;
            width: 1920px;
            height: 1080px;
            display: flex;
           
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            overflow: hidden;
           
        }
        
        /* Left Section - Images */
        .left-section01 {
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* gap: 30px; */
           
            padding: 10px;
        }
        
        .clickable-img {
            /* width: 800px;
            height: 650px; */
           
           
            cursor: pointer;
            border-radius: 10px;
            transition: transform 0.3s ease-in-out;
        }
        
        .clickable-img:hover {
            transform: scale(1.1);
        }
        
       

        #image1{
            cursor: pointer;
            border-radius: 10px;
            transition: transform 0.3s ease-in-out;
             top:40px;
             left: 50px;
             width: 400px;

        
        }


        #image2{
            cursor: pointer;
            border-radius: 10px;
            transition: transform 0.3s ease-in-out;
             top:360px;
             left: 300px;
             width: 400px;

        
        }

        #image3{
            cursor: pointer;
            border-radius: 10px;
            transition: transform 0.3s ease-in-out;
             top:710px;
             left: 500px;
             width: 400px;

        
        }

      /* Right Section - Container */
.right-section01 {
    top: 0px;
    left: 950px;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
 
  
    text-align: left;
    font-size: 1.2rem;
    flex-direction: column;
}

/* Info Section */
.info-section {
    opacity: 0;
    display: none;
    background: rgba(255, 255, 255, 0.95);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
    max-width: 100%;
    transition: opacity 0.5s ease-in-out;
    margin-top: 250px;
}

/* Heading Style */
.info-section h2 {
    color: #b22222;
    font-size: 2rem;
    margin-top: 20px;
    margin-bottom: 25px;
}

.info-section p{
    margin: 20px 0;
    font-size: 1.4rem;
}

/* List Style */
.info-section ul {
    list-style: none;
    padding: 0;
}

.info-section li {
    background: rgba(255, 0, 0, 0.1);
    border-left: 5px solid #b22222;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
    font-size: 1.2rem;
}

/* Hover Effect on List Items */
.info-section li:hover {
    transform: translateX(8px);
    background: rgba(255, 0, 0, 0.2);
}

        /* Close Button */
#close-btn {
    position: absolute;
    top: 660px;
    right: 60px;
    background: rgb(218, 204, 204);
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.3s ease;
}

#close-btn:hover {
    background: darkred;
}

.north{
    font-size: 3.5rem;
    font-weight: bold;
    color: #d30000;
    padding: 40px 0;

}

.north-tap > span {
    font-size: 3rem;
    padding: 20px 40px 0 150px;
    color: rgb(252, 249, 246);
    display: inline-block;  /* Make sure the span behaves like a block element */
    animation: yo-yo-animation 3s infinite ease-in-out;

}
@keyframes yo-yo-animation {
    0% {
      transform: scale(1); /* Initial scale */
      opacity: 1; /* Full opacity */
    }
    50% {
      transform: scale(1.2); /* Grow the element */
      opacity: 0.9; /* Slightly fade */
    }
    100% {
      transform: scale(1); /* Return to original size */
      opacity: 1; /* Full opacity again */
    }
  }

.north-tap{
    font-size: 2rem;
    padding: 0 10px 0 70px;
    color: rgb(15, 15, 15);

}