@import url('https://fonts.googleapis.com/css?family=Oswald|Sacramento&display=swap');
@import url('https://fonts.googleapis.com/css?family=Codystar|Josefin+Slab&display=swap'); 
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

a {
    outline: 0;
    }

body{
    font-family: sans-serif;
}
img{
    max-width: 100%;
    height: auto;
    
}
.head-of-offer, .para-of-offer{
    color:black
}
.index-main-img{
    padding-top:50px;
    display: flex;
    flex-wrap: wrap;
}

@media only screen and (max-width:748px){
    .index-main-img{
        padding-top:116px;
        display: flex;
        flex-wrap: wrap;
    }
} 
@media screen and (min-width:300px){
    .index-main-img{
        padding-top:70px;
        display: flex;
        flex-wrap: wrap;
    }
} 
@media screen and (min-width:200px){
    .index-main-img{
        padding-top:100px;
        display: flex;
        flex-wrap: wrap;
    }
} 
.index-offers-img{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap:20px;
    margin-top:10px;
    margin-bottom: 10px;
    margin-left:30px;
    margin-right: 20px;
}
.index-grid-img-1{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap:20px;
    margin-left:20px;
    margin-right: 20px;
}

.info-of-img-below{
    text-align:center;
    color:#ffffff;
    background-color: #14332b; 
    height:30px;
    padding-top:5px;
}
@media screen and (max-width:891px){
    .info-of-img-below{
        font-size:12px;
    }
}
@media screen and (max-width:712px){
    .info-of-img-below{
        font-size:9px;
    }
}
.index-grid-img-2{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap:20px;
    margin-left:20px;
    margin-right: 20px;
    
}

.index-grid-img-2 img:nth-child(3){
    width:372px;
    object-fit:cover;
}
.index-grid-img-2 img:nth-child(1){
    width:253px;
    object-fit:cover;
}
.index-grid-img-2 img:nth-child(4){
    width:372px;
    object-fit:cover;
}
.index-grid-img-2 img:nth-child(2){
    width:273px;
    object-fit:cover;
}
.index-grid-img-2 img:nth-child(5){
    width:275px;
    object-fit:cover;
}
.index-grid-img-2 img:nth-child(6){
    width:275px;
    object-fit:cover;
}
.head-of-offer{
    padding-left:50px;
}
.para-of-offer{
    padding-left:50px;
}
@media screen and (max-width:400px){
    .head-of-offer{
        font-size: 16px;
    }
    .para-of-offer{
        font-size:11px;
    }  
}
.index-grid-img-3{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-row-start: 1;
    grid-row-end: 3;
    grid-gap: 20px;
    margin-left:20px;
}
@media screen and (max-width:1130px){
    .index-grid-img-3{
      padding-left:30px;
      padding-right:30px;
    }
  }
  
.footer-container{
    align-content: center;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr ;
    grid-gap: 20px;
    background-color: black;
    object-fit: cover;
    padding-bottom:30px;
}
.footer-container .footer-1, .footer-2, .footer-3, h5,h4,h2,h3,h6,p{
    color:white;
}

.footer-container .footer-1 h2,p,h5,h6{
    padding-left:50px;
    padding-top:20px  
}

.footer-container .footer-2,.footer-3{
    padding-top:70px;
}
.copy-right{
    font-family: 'Sacramento', cursive;
    text-align: center;
    color:#14332b; 
    font-size:27px;
}
.copy-right a{
    color:#14332b; 
}
@media  screen and (max-width:593px){
    .footer-container .footer-1 h2,p,h5,h6{
        padding-left:10px;
    }

     .copy-right {
        font-size:19px;
    }
}

/* Global splash screen overlay (reused on all pages) */
.splash-active body > :not(#splash-overlay) {
    visibility: hidden !important;
}

#splash-overlay {
    position: fixed;
    inset: 0;
    background: #c9c4af;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    pointer-events: all;
    overflow: hidden;
    transition: opacity 0.4s ease;
}

#splash-overlay .splash-stage {
    position: relative;
    width: 100%;
    height: 100%;
    background: #c9c4af;
    display: flex;
    align-items: center;
    justify-content: center;
}

#splash-overlay .splash-rule,
#splash-overlay .splash-bar-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#splash-overlay .splash-rule {
    top: 50%;
    width: 0;
    height: 1px;
    background: #1a3d2b;
    transition: width 0.8s cubic-bezier(0.16,1,0.3,1);
}

#splash-overlay .splash-num {
    position: absolute;
    font-family: 'Playfair Display', serif;
    font-size: 180px;
    color: #1a3d2b;
    opacity: 0;
    transform: scale(1.22) translateY(10px);
    transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 1.4s cubic-bezier(0.16,1,0.3,1);
}

#splash-overlay .splash-banner {
    position: absolute;
    bottom: 148px;
    left: 50%;
    transform: translate(-50%,0) scaleX(0);
    transform-origin: center;
    background: #1a3d2b;
    width: 320px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

#splash-overlay .splash-banner span {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 900;
    color: #c9c4af;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#splash-overlay .splash-tagline {
    position: absolute;
    bottom: 108px;
    left: 50%;
    transform: translate(-50%, 14px);
    opacity: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #1a3d2b;
    white-space: nowrap;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

#splash-overlay .splash-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255,248,220,0.45) 50%, transparent 70%);
    transform: translateX(-100%) skewX(-12deg);
    opacity: 0;
    transition: opacity 0.3s ease, transform 1.1s cubic-bezier(0.16,1,0.3,1);
}

#splash-overlay .splash-bar-wrap {
    bottom: 72px;
    width: 180px;
    height: 1px;
    background: rgba(26, 61, 43, 0.2);
    opacity: 0;
    transition: opacity 0.4s ease;
}

#splash-overlay .splash-bar {
    width: 0%;
    height: 100%;
    background: #1a3d2b;
    transition: width 0.12s linear;
}

#splash-overlay .splash-hanger {
    position: absolute;
    top: 68px;
    left: 50%;
    transform: translate(-50%,0) scale(0) rotate(-20deg);
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.34,1.56,0.64,1);
}