@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

body{
     margin: 0;
    padding: 0;
    overflow-x: hidden; /* Hide any horizontal overflow */
    width: 100%;
    min-height: 100vh;
    display: grid;
    place-items: center;
    font-family: 'Poppins', sans-serif;
    background: url('./images/retro.jfif');
    background-size: cover; /* Cover the entire viewport */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat;
    background-attachment: fixed; /* Fixed background scrolling */
}

main{
    margin-top: 70px;
}
.contactus{
    width: 100vw;
    height: 200px;
    background: url('./images/banner2.png');
    background-size: cover; /* Cover the entire viewport */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat;
    background-attachment: fixed; /* Fixed background scrolling */
    display: flex;

}
.contactus div{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}


/* Custom Background and Text Colors */
.custom-bg-gray-900 {
    background-color: #000;
}

.custom-bg-gray-800 {
    background-color: #6a0094b0;
}

.text-white {
    color: #ffffff;
}

.custom-text-gray-400 {
    color: #cbd5e0;
}

.custom-text-indigo-600 {
    color: #5a67d8;
}

/* Custom Padding and Margins */
.custom-py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.custom-px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.custom-mb-2 {
    margin-bottom: 0.5rem;
}

.custom-mb-4 {
    margin-bottom: 1rem;
}

.custom-mb-16 {
    margin-bottom: 4rem;
}

.custom-p-10 {
    padding: 2.5rem;
}

/* Custom Font Sizes */
.custom-text-lg {
    font-size: 1.125rem;
}

.custom-text-2xl {
    font-size: 1.5rem;
}

.custom-text-3xl {
    font-size: 1.875rem;
}

.custom-text-4xl {
    font-size: 2.25rem;
}

.md\:custom-text-5xl {
    font-size: 3rem;
}

.xl\:custom-text-6xl {
    font-size: 3.75rem;
}

/* Custom Max Widths */
.custom-max-w-lg {
    max-width: 32rem;
}

.custom-max-w-3xl {
    max-width: 48rem;
}

.custom-max-w-5xl {
    max-width: 64rem;
}

/* Custom Flexbox Properties */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.justify-center {
    justify-content: center;
}

.items-center {
    align-items: center;
}

/* Custom Grid Properties */
.custom-grid {
    display: grid;
}

.sm\:custom-grid-cols-2 {
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 640px) {
    .sm\:custom-grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.md\:custom-grid-cols-2 {
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
    .md\:custom-grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.custom-gap-5 {
    grid-gap: 1.25rem;
}

/* Custom Padding Right and Left for Larger Screens */
.lg\:custom-pr-52 {
    padding-right: 13rem;
}

.lg\:custom-pl-48 {
    padding-left: 12rem;
}

.lg\:custom-pr-44 {
    padding-right: 11rem;
}

.grid-offer{
    width: 100vw;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.card{
    width: 100vw;
}


/* General Styles */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

h1 {
    text-align: center;
    margin-bottom: 30px;
    font-family: 'Poppins', sans-serif;
}

.service-box-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    width: 100%;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* Include padding and borders in element width */
    padding: 0 20px; /* Add padding to ensure no content hits the edges */
    overflow: hidden; /* Prevent any overflow */
}

.service-box {
    margin-bottom: 20px;
    background-color: #f7f7f7;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    width: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.service-icon {
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-shadow: 5px 5px 15px rgba(0, 0, 0, 1); /* Adjust as needed */
}

.service-icon.yellow {
    background: url('./adfilm/3N7A9220.jpg');
    background-size: cover; /* Cover the entire viewport */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat;
}

.service-icon.orange {
    background: url('./fashionshows/259A0013.JPG');
    background-size: cover; /* Cover the entire viewport */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat;
}

.service-icon.red {
    background: url('./casting/AMR_0884.JPG');
    background-size: cover; /* Cover the entire viewport */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat;
}

.service-icon.grey {
    background: url('./events/2Q6A8842.JPG');
    background-size: cover; /* Cover the entire viewport */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat;
}

.front-content {
    text-align: center;
}

.front-content i {
    font-size: 60px;
    margin-bottom: 10px;
}

.service-content {
    padding: 0px;
    text-align: center;
}

.service-content h3 {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}

.service-content p {
    font-size: 20px;
    color: #7f8c8d;
    width: 100%;
}

h1{
    font-size:15px;
    text-align: left;
    text-transform:capitalize;
}
.service-box{
   position: relative;
   overflow: hidden;
   margin-bottom:10px;
   perspective:1000px;
   -webkit-perspective:1000px;
}
.service-icon{
   width: 100%;
   height: 220px;
   padding: 20px;
   text-align: center;
   transition: all .5s ease;
}

.service-content{
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
   opacity: 0;
   width: 100%;
   height: 220px;
   padding: 20px 0;
   text-align: center;
   transition: all .5s ease;
   background-color: #474747;
   backface-visibility:hidden;
   transform-style: preserve-3d;
   -webkit-transform: translateY(110px) rotateX(-90deg);
   -moz-transform: translateY(110px) rotateX(-90deg);
   -ms-transform: translateY(110px) rotateX(-90deg);
   -o-transform: translateY(110px) rotateX(-90deg);
   transform: translateY(110px) rotateX(-90deg);
}
.service-box .service-icon .front-content{
   position: relative;
   top:80px;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   transform: translateY(-50%);
}

.service-box .service-icon .front-content i {
   font-size: 28px;
   color: #fff;
   font-weight: normal;
}

.service-box .service-icon .front-content h3 {
   font-size: 30px;
   color: #fff;
   text-align: center;
   margin-bottom: 15px;
   text-transform: uppercase;
}
.service-box .service-content h3 {
   font-size: 15px;
   font-weight: 700;
   color: #fff;
   margin-bottom:10px;
   text-transform: uppercase;
}
.service-box .service-content p {
   font-size: 13px;
   color: #b1b1b1;
   margin:0;
}
.yellow{background-color: #ffc000;}
.orange{background-color: #fc7f0c;}
.red{background-color: #e84b3a;}
.grey{background-color: #474747;}
.service-box:hover .service-icon{
   opacity: 0;
   -webkit-transform: translateY(-110px) rotateX(90deg);
   -moz-transform: translateY(-110px) rotateX(90deg);
   -ms-transform: translateY(-110px) rotateX(90deg);
   -o-transform: translateY(-110px) rotateX(90deg);
   transform: translateY(-110px) rotateX(90deg);
}
.service-box:hover .service-content {
   opacity: 1;
   -webkit-transform: rotateX(0);
   -moz-transform: rotateX(0);
   -ms-transform: rotateX(0);
   -o-transform: rotateX(0);
   transform: rotateX(0);
}


.kmore{
    width: 100vw;
    display: flex;
    justify-content: center;
    font-size: 30px;
}
.kmore a{
    color: white;
    text-decoration: none;
    border-bottom: 1px solid red;
}
.mainh1{
    margin-left: 25px;
}


@media screen and (max-width: 920px){
    .contactus{
        width: 100%;
    }
    #built-h1{
        font-size: 25px;
    }
}
@media screen and (max-width: 620px){
    .contactus div{
        font-size: 20px !important;
    }
}