/* header */
body{
    background-color: #f7f3eb;
    font-family: Sora, sans-serif;
}
header{
    padding: 0px 50px;
}
.hh{
    display: flex;
    font-family: Anybody, sans-serif;
      padding-top: 20px;
      padding-bottom: 30px;
}
.hone{
    align-items: center;
    gap: 10px;
    width: 33%;
    text-align: left;
    display: flex;
    font-weight: 600;
    font-size: 18px;
  
    text-transform: uppercase;
}
.hone img{
    width: 6%;
}
.htwo{
    width: 33%;
    text-align: center;
}
.hthree{
    width: 33%;
    text-align: end;
    color: #fb6947;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 18px;
        padding-top: 20px;
    
    
}
.hthree p{
    border: 2px solid #fb6947;
    display: inline;
    padding: 14px 35px;
    border-radius: 90px;
}.demos{
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 600;
    padding: 20px 0px;
    padding-right: 40px;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}

.demosone{
    align-items: center;
    gap: 10px;
    display: flex;
}

.demosone .arrow svg {
    transition: transform 0.6s ease;
}

.demosone .arrow svg path {
    transition: stroke 0.3s ease;
}

.demos-wrapper:hover .arrow svg path {
    stroke:#fb6947;
}

.demos-wrapper:hover .arrow svg {
    transform: rotate(180deg);
    color: #fb6947;
}

.demos-wrapper:hover {
    color: #fb6947;
}

.demostwo{
    align-items: center;
    gap: 10px;
    display: flex;
}

.demos-wrapper {
    position: relative;
    display: inline-block;
}

.demos-wrapper:hover .dropdown {
    display: flex;
}

.demosthree{
    align-items: center;
    gap: 10px;
    display: flex;
}

.demosfour{
    align-items: center;
    gap: 10px;
    display: flex;
}

.demosfive{
    align-items: center;
    gap: 10px;
    display: flex;
}

/* DROPDOWN MENU */
.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #f9f5ee;
    border: 2px solid black;
    padding: 20px 20px;
    display: none;
    flex-direction: column;
    gap: 15px;
    z-index: 100;
    width: 330px;
    margin-top: 20px;
}

.dropdown::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: transparent;
}

/* Two-column dropdown for "all pages" */
.dropdown.two-column {
    width: 500px;
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
}

.dropdown.two-column .dropdown-item {
    width: calc(50% - 7.5px);
}

/* For "all pages" wrapper positioning */
.demos-wrapper.all-pages {
    position: relative;
    display: inline-block;
}

.demos-wrapper.all-pages:hover .dropdown {
    display: flex;
}

/* Adjust positioning for right-aligned dropdown */
.dropdown.right-align {
    right: 0;
    left: auto;
}

.dropdown-item {
    font-weight: 600;
    text-transform: uppercase;
    color: #111;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    padding-left: 20px;
    transform: translateX(0);
}

.dropdown-item:hover {
    color: #fb6947;
    transform: translateX(15px);
}

/* Dash indicator on hover */
.dropdown-item:hover::before {
    content: '—';
    position: absolute;
    left: -15px;
    color: #fb6947;
    font-weight: bold;
    opacity: 1;
    transition: opacity 0.4s ease;
}

/* Active item style */
.dropdown-item.active {
    color: #fb6947;
}

/* Active item dash */
.dropdown-item::before {
    content: '—';
    position: absolute;
    left: -15px;
    color: #fb6947;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.4s ease;
}
/* header over */
/* main starts */
.open{
    display: flex;
    gap: 20px;
}
.openone{
    width: 65%;
}
.opentwo{
  
    justify-content: center;
    display: flex;
    width: 35%;
}
main{
    padding: 30px 50px;
}
.today{
    padding-top: 30px;
    font-family:Sora, sans-serif;
    font-size: 16px;
    color: #161616;
    letter-spacing: -.16px;
    font-weight: 600;
}
.omnia{
    padding-top: 30px;
    display: flex;
    gap: 60px;
}
.omniaone{
    font-size:92px ;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: -5px;
}
.omniatwo{
    font-size: 18px;
    line-height: 1.4em;
    letter-spacing: -.16px;
    padding-top: 15px;
}
.histo{
    display: flex;
     font-size:92px ;
    text-transform: uppercase;
    font-weight: 600;
    /* letter-spacing:px; */
    gap: 30px;
}
.histo img{
    height: 100%;
    padding-top: 15px;
}
p{
    margin: 0px;
}
.discover{
    color: #fb6947;
    font-weight: 600;
    font-size: 20px;
    padding-top: 40px;
}
.opentwo img{
    width: 70%;
}
.our{
    display: flex;
    padding-top: 100px;
    gap: 80px;

}
.ourone{
    width: 40%;
    letter-spacing: -.24px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4em;
    
}
.ourtwo{
    width: 60%;
  
}
.welcome{
    font-size: 54px;
    letter-spacing: 1.08px;
    text-transform: uppercase;
    font-weight: bolder;
}
.as{
    letter-spacing: -.16px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: Sora, sans-serif;
    font-weight: 400;
    line-height: 1.4em;
    font-size: 16px;
}
.asw{
    padding-top: 30px;
    color: #3e3d3d;
}
.ai{
    display: flex;
    justify-content: space-between;
    padding-top: 70px;
    gap: 50px;
}
.onetwo{
        font-size: 70px;
    font-weight: 600;
    line-height: 1em;
    color: #fb6947;
    letter-spacing: 1.76px;
    display: flex;
    justify-content: center;
    text-align: center;
}
.coll{
        letter-spacing: .36px;
    font-size: 18px;
    font-weight: 600;
}
/* animation one begins  */ 

     * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f7f3eb;
        }

        .section-wrapper {
            display: flex;
            padding-top: 150px;
            overflow: hidden;
            height: 100vh;
            padding-right: 150px;
        }

        .section-card {
            flex: 1;
            position: relative;
            overflow: hidden;
            background-color: #f7f3eb;
            transition: flex 0.5s ease-in-out;
            cursor: pointer;
            border-top: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
        }

       

        .section-card:first-child .default-content {
            padding-right: 0rem;
        }

        .section-card:hover {
            flex: 2.5;
        }

        .default-content, .hover-content {
            padding: 0rem 1rem 150px 1rem;
            transition: opacity 0.4s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
      
            z-index: 2;
            position: relative;
        }

        .default-content {
            opacity: 1;
            background-color: #f7f3eb;
        }

        .hover-content {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            color: white;
            opacity: 0;
            transition: opacity 0.4s ease, transform 0.5s ease;
            transform: scale(1.05);
            z-index: 3;
        }

        .section-card:hover .hover-content {
            opacity: 1;
            transform: scale(1);
        }

        .section-card:hover .default-content {
            opacity: 0;
        }

        .number {
            font-size: 150px;
            font-weight: 600;
            color: #ff5733;
            position: relative;
            z-index: 1;
            font-family: Anybody, sans-serif;
            line-height: 1;
            margin-left: -60px; /* This creates the left cutoff effect */
            overflow: visible;
        }

        .hover-content .number {
            font-size: 150px;
            color: white;
               margin-left: -60px;
        
        }

        .title {
            font-weight: 700;
            font-size: 1.2rem;
            margin-top: 1rem;
        }

        .description {
            letter-spacing: -.16px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: Sora, sans-serif;
    font-weight: 400;
    line-height: 1.4em;
    font-size: 16px;
        }

        .hover-content h2 {
            font-size: 28px;
            font-weight: bold;
            color: white;
            z-index: 5;
                font-weight: 600;
    line-height: 1.2em;
    letter-spacing: -.56px;
        }

        .hover-content p {
          color:  white;
              font-size: 16px;
            font-family: Sora, sans-serif;
            font-weight: 400;
    line-height: 1.4em;
    letter-spacing: -.16px;
            margin-top: 1rem;
            z-index: 5;
        }

        .discover-btn {
            margin-top: 1.5rem;
            padding: 0.5rem 0.5rem;
            border: 1px solid white;
            background: transparent;
            color: white;
            font-weight: bold;
            cursor: pointer;
            z-index: 5;
            display:inline-block;
            border-radius: 30px;
            transition: background-color 0.3s ease;
        }
        .discover-btn {
            display: inline-block;
            width: 150px;
        }

        .discover-btn:hover {
            background-color: white;
            color: #fb6947;
        }
/* animation one ends */

.dive{
    padding-top: 90px;
    font-size: 54px;
    letter-spacing: 1.08px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.2em;
}.img {
  display: flex;
  
  gap: 40px;
}
.imgone{
    width: 50%;
}
.imgtwo{
    width: 50%;
}


.image-wrapper:hover img {
    transform: scale(1.1); /* Zoom in by 10% */
}
.image-wrapper {
    overflow: hidden;
    padding-top: 40px;
  position: relative;
  width: 100%;      /* Let image decide width */
  display: inline-block;
}

.image-wrapper img {
  display: block;
  width: 100%;      /* Or remove this if using natural size */
  height: auto;
  transition: transform 0.4s ease;
}

.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #f6f0e7;
  padding: 20px;
  max-width: 80%;
}

.title {
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0;
}

.author {
  font-size: 14px;
  color: #5a5a5a;
  margin-top: 5px;
}
.school{
    display: flex;
    padding-top: 100px;
    gap: 20px;
}
.schoolone{
    width: 33%;
    padding-top: 150px;
}
.schooltwo{
    width: 33%;
}
.schoolthree{
    padding-top: 150px;
    width: 34%;
}
.visits{
    display: flex;
    gap: 10px;
}
.sc{
    padding-top: 30px;
    letter-spacing: -.56px;
    font-size: 28px;
    font-weight: 600;
    text-transform: uppercase;
}
.wel{
    padding-top: 15px;
    padding-right: 30px;
    color: #3e3d3d;
        font-size: 16px;
        font-family: Sora, sans-serif;
    font-weight: 400;
    line-height: 1.4em;
    letter-spacing: -.16px;
}
.read{
    text-transform: uppercase;
    padding-top: 20px;
    font-weight: 600;
    color: #fb6947;
}
.reads{
    display: flex;
    gap: 20px;
}
.reads img{
    padding-top: 20px;
     transition: transform 0.3s ease; 
}
.visit{
    border: 1px solid gray;
    padding: 50px 0px 50px 50px;
   margin-bottom: 20px;
}

/* image chnging while visiting  */
.visit {
  border: 1px solid gray;
  padding: 50px 0px 50px 50px;
  transition: border-color 0.4s ease;
}

.visit:hover {
  border-color: red;
}

.visits {
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
}

.default-img,
.hover-img {
  transition: opacity 0.4s ease;
   /* adjust as needed */
  height: auto;
}

.hover-img {
  position: absolute;
  opacity: 0;
}

.visit:hover .default-img {
  opacity: 0;
}

.visit:hover .hover-img {
  opacity: 1;
}

.reads:hover p{
    color: black;
}
.reads:hover img {
    transform: rotate(42deg);
}

.education{
    text-transform: uppercase;
    letter-spacing: 1.08px;
        line-height: 1.2em;
        font-size: 50px;
        font-weight: 600;
}
.art{
        line-height: 1.4em;
            letter-spacing: -.16px;
            font-size: 18px;
    font-weight: 600;
    padding-right: 50px;
    padding-top: 50px;
    color: #3e3d3d;
}
.dis{
    color: #fb6947;
    border: 2px solid #fb6947;
    padding: 10px;
    display:inline-block ;
    border-radius: 50px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 14px 35px;
    margin-top: 40px;
    line-height: 1em;
}
.cur{
    display: flex;
    padding-top: 100px;
   
}
.curone{
    width: 50%;
        letter-spacing: 1.08px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.2em;
    font-size: 45px;
}

.curthree{
    width: 50%;
    font-size: 18px;
    font-weight: 600;
}
.curtwo {
    width: 50%;
    display: flex;
    justify-content: center;
}

.curtwo img {
    width: 40%;
    height: auto;
    animation: rotateImage 4s linear infinite;
}

@keyframes rotateImage {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.opentwo img {
    animation: rotateImage 10s linear infinite;
}
.imagesss {
    padding-top: 90px;
  display: flex;
 
}

.profile {
  position: relative;
  width: 20%;
  overflow: hidden;
}

.profile img {
  width: 100%;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}

.profile:hover img {
  filter: grayscale(0%);
}
.profile:hover .info h3 {
    color: #fb6947;
}


.info {
  position: absolute;
  bottom: 20px;
  right: 10px;
  color: white;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
  font-family: sans-serif;
      text-align: end;
    right: 10px;
    width: 50%;
}

.info h3 {
 
  font-size: 24px;
    font-weight: 600;
    line-height: 1.2em;
     transition: color 0.3s ease; /* smooth transition */
}

.info p {
 
  padding-top: 10px;
  font-weight: 400;
    line-height: 1.4em;
    font-size: 16px;
}

.latest{
    display: flex;
    padding-top: 150px;
    justify-content: space-between;
}
.lone{
    text-transform: uppercase;
    font-size: 54px;
    font-weight: 600;
    line-height: 1.2em;
}
.ltwo p{
    text-transform: uppercase;
    color: #fb6947;
    font-size: 18px;
    transition:  0.3s ease;  
    font-weight: 600;
    padding: 14px 35px;
    border: 2px solid #fb6947;
    border-radius: 40px;
}
.ltwo p:hover{
background-color: #fb6947;
color: white;
}
.role{
    display: flex;
    gap: 40px;
   
}
.roleone, .roletwo, .rolethree {
 
    position: relative;
}
.roleone{
    width: 33%;
}
.roletwo{
    width: 33%;
}
.rolethree{
    width: 33%;
}
.roleone img{
    width: 100%;
    border-radius: 10px;
     transition: transform 0.4s ease;

    
}
.roletwo img{
    width: 100%;
    border-radius: 10px;
     transition: transform 0.4s ease;
    
}
.rolethree img{
    overflow: hidden;
    width: 100%;
    border-radius: 10px;
     transition: transform 0.4s ease;
   
}
.roleone:hover img {
    transform: scale(1.1); /* Zoom in by 10% */
}
.roletwo:hover img {
    transform: scale(1.1); /* Zoom in by 10% */
}
.rolethree:hover img {
    transform: scale(1.1); /* Zoom in by 10% */
}

.guide{
    position: absolute;
    width: auto;
    top: 10px;
    font-size: 16px;
    left: 10px;
    background-color: #fb6947;
display: block;
text-transform: uppercase;
text-align: center;
color: white;
border-radius: 10px;
padding: 10px;
font-weight: 600;
    
}
.june{
    align-items: end;
    display: flex;
    justify-content: space-between;
}

.jone{
    display: flex;
    gap: 13px;
}
.jone img{
    padding-top: 20px;
width: 10%;
}
.role{
        letter-spacing: .96px;
    font-size: 25px;
    text-transform: uppercase;
    padding-top: 20px;
    font-weight: 600;
}
.plays{
    text-transform: none;
    padding-top: 20px;
    font-size: 16px;
    letter-spacing: -.16px;
    font-weight: 400;
    line-height: 1.4em;
}
.jtwo{
    font-size: 16px;
    line-height: 1.4em;
    color: #7a7a7a;
    font-weight: 100;
}
.read{
    font-size: 17px;
    line-height: 1.2em;
}
.jone:hover p{
color: black;
}
.jone:hover img{
 transform: rotate(42deg);
}
.jone p,
.jone img {
  transition: all 0.3s ease; /* Adjust duration and timing as needed */
}

.bg{
    display: flex;
    padding-top: 150px;
}
.bgone{
    width: 40%;
}
.bgtwo{
    width: 60%;
    background-color: #fb6947;
    color: white;
    padding: 100px 10px 20px 40px;
}
.bgtwo .location{
        font-weight: 600;
    line-height: 1.2em;
        letter-spacing: 1.08px;
    text-transform: uppercase;
    font-size: 54px;
}
.planning{
    padding-top: 30px;
        font-size: 16px;
    line-height: 1.4em;
    letter-spacing: 1px;
}
.opening{
    display: flex;
    padding-top: 50px;
    gap: 25px;
}
.hours{
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2em;
    text-transform: uppercase;
    padding-bottom: 20px;
}
.are{
    font-size: 17px;
    line-height: 1.4em;
}
.book-ticket {
    padding-top: 50px;
    padding-left: 100px;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
   
}
.book-ticket p{
     border: 2px solid white;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 20px;

}
.book-ticket:hover p{
    color: #fb6947;
    background-color: white;
}

.bgone {
  position: relative; /* This sets the context for absolutely positioned children */
  display: inline-block; /* Optional: keeps it tight around content */
}

.bgone img {
  display: block;
  width: 100%; /* Adjust as needed */
  height: 100%;
}

.youtube {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centers it */
 
  
 //* Optional */
}
.youtube img {
    display: block; /* ensures it behaves like a block element */
    margin: 0 auto;
    width: 100px;      /* set fixed width */
    height: 100px;     /* make height equal to width */
    padding: 20px;     /* padding inside the circle */
    background-color: #ff5733;
    border: 4px solid #fb6947;
    border-radius: 50%; /* makes it a perfect circle */
    box-sizing: border-box;
     transition: box-shadow 0.4s ease;  /* includes padding & border in the total size */
}

.youtube img:hover {
    box-shadow: 0 0 0 10px rgba(251, 105, 71, 0.6);
}


.youtube p{
    padding-top: 30px;
    color: white;
    font-size: 18px;
        font-weight: 400;
    line-height: 1.4em;
}
.signup{
    display: flex;
    padding-top: 100px;
    gap: 30px;
}
.signup-one{
    width: 40%;
}
.signup-two{
    padding-left: 50px;
    width: 20%;
}
.signup-three{
    width: 20%;
}
.signup-four{
    padding-right: 20px;
    width: 20%;
}
.signup-one-one{
    font-weight: 600;
    line-height: 1.2em;
    letter-spacing: .84px;
    text-transform: uppercase;
    font-size: 46px;
}
.here{
        font-size: 28px;
    font-weight: 600;
    line-height: 1.2em;
    letter-spacing: -.56px;
    text-transform: uppercase;
}
.home{
    padding-top: 20px;
    /* text-align: center; */
        line-height: 1.2em;
        color: #161616;
            letter-spacing: .15px;
}
.home p{
    padding-bottom: 30px;
}

.email-form {
    margin-top: 50px;
  display: flex;
  border: 1px solid #fb6947;
  border-radius: 50px;
  overflow: hidden;
  width: 400px;
  background-color: #f9f5ee; /* light background */
}

.email-form input {
  flex: 1;
  border: none;
  padding: 15px 20px;
  font-size: 16px;
  outline: none;
  background-color: transparent;
  color: #333;
}

.email-form input::placeholder {
  color: #555;
}

.email-form button {
  background-color: #fb6947;
  color: white;
  font-weight: bold;
  padding: 0 25px;
  border: none;
  cursor: pointer;
  font-size: 16px;
 
}

.email-form button:hover {
  background-color: black;
}

.omniatwoo{
    gap: 40px;
    display: flex;
   padding-right: 50px;
   
   
}
.omniatwoo img{
    width: 20%;
}
.omniaa{
    padding-top: 50px;
    display: flex;
    justify-content: space-between;
}
.omniaonee p{
    color: #161616;
   padding-bottom: 10px;
        font-size: 15px;
   
}
.lastt{
    background-color: #ff5733;
    height: 10px;
}
.dis:hover{
    color: white;
    background-color: #fb6947;
}
.curr{
    display: flex;

}
.nav{
    display: none;
}