:root {

    --background-color:white;
    --box-color: lightgray;
    --menu-text-color: white;
    
    --apple-black: #3b3b3b;
    --apple-gray: #e3e3e3;
    --rogers-red: rgb(218, 41, 28);
    --logo-yellow: #ffc700;
    
    --text-color:rgb(59, 59, 59);           /*apple-black*/
    --text-color-light: rgb(150,150,150);
    --text-hover-color: rgb(218, 41, 28);   /*rogers-red*/
    --film-border-color: green;
    
    --body-color: #e3e3e3;                  /* apple-gray */
    --menu-color: rgb(218, 41, 28);         /*rogers-red*/
    --tag-color: rgb(218, 41, 28);

    --global-font-size: 18px;
    --global-font-weight: 400;

}

#home{
    color: var(--logo-yellow);
}
html
{
    overflow-x: hidden;
}

body
{
    background-color: white;
    font-family: "SF Pro Text","SF Pro Icons","Calibri", "Helvetica Neue","Helvetica","Arial",sans-serif;
    font-size: var(--global-font-size);
    font-weight: var(--global-font-weight);
    margin: 0px;
    position: relative;
    overflow-x:hidden;
}

.dull
{
        color: var(--text-color-light);
}
.bright
{
        color:var(--text-color);
}

.hero-section
{
    position:relative;
    width:100vw;
    height: fit-content;
    
    .hero-content
    {
        position: absolute;
        z-index:3;
        
        .hero-title
        {
            font-weight:600;
        }
        .hero-description
        {
            
        }
        .cta 
        {
            position: relative;
            height: fit-content;
            margin-top: 20px;
            
            a
            {
                position: relative;
                text-decoration: none;
                cursor: pointer;
                padding:10px;
                border: 2px solid var(--logo-yellow);
                border-radius: 5px;
                color: black;
                background-color: var(--logo-yellow);
                font-size: 20px;
                font-weight: 550;
            }
            a:hover
            {
                background-color: white;
                color: black;
                border: 2px solid black;
            }
        }
    }
    
    .hero-image
    {
        position: relative;
        width: 100vw;
        height: 120vh;
        z-index: 1;
        
        img
        {
            position: relative;
            width:100%;
            height: 100%;
            z-index: 1;
            object-fit: cover;
        }
    }
    .hero-image::before
    {
        content: '';
        position: absolute;
        top: 0;
        left:0;
        right:0;
        bottom:0;
        z-index: 2;
        background: linear-gradient(to bottom ,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0.65),rgba(255,255,255,0.85), rgba(255,255,255,1));
    }
}
.reason-section
{
    margin-top:-200px;
    z-index:3;
}
.center-heading
{
    position: relative;
    margin:auto;
    line-height: 1;
    width:fit-content;
    display: flex;
    flex-direction: column;
    text-align: center;
    
    .tag
    {
        font-weight:550;
        margin-bottom: 5px;
        font-size:30px;
    }
    
    .sub-tag
    {
        font-weight:350;
        font-weight: 18px;
    }
}
.intro-section
{
    position: relative;
    margin-bottom: 50px;
    z-index:3;
    width:100vw;
    height: fit-content;
    background-color: var(--apple-gray);
    padding-top: 50px;
    padding-bottom: 50px;
    
    .intro-content
    {
        position: relative;
        margin: auto;
        text-align: center;
    }
    
}
.section
{
            position:relative;
            width:100%;
            height: auto;
            margin-bottom:30px;
            
            .section-container
            {
                position:relative;
                display:flex;
                flex-direction:column;
                margin:auto;
                overflow:hidden;
                color: var(--apple-black);
                
                .space{
                    height:30px;
                    width:100vw;
                }
                .heading
                {
                    font-size:30px;
                    font-weight:550;
                    line-height: 1;
                    margin-top:0px;
                    margin-bottom:0px;
                    width:fit-content;
                }
                .hide{
                    position:relative;
                    margin-top:-20px;
                    z-index:2;
                    width:100vw;
                    height:20px;
                    background-color:white;
                }
                .description-section
                {
                    position:absolute;
                    top:0;
                    left:0;
                    position:relative;
                    width:100%;
                    height:100%;
                    overflow-x:hidden;
                    
                    
                    .description
                    {
                        
                        padding: 5px 0px 20px 0px;
                        width:100vw;
                        overflow-x:scroll;
                        scroll-behavior: smooth;
                        white-space:nowrap;
                        scroll-snap-type: x mandatory;
                    }
                    
                    .arrows
                    {
                        position: absolute;
                        margin-top:-200px;
                        width: 80%;
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        margin-left: 10vw;
                    }
                    
                    .arrow-container
                    {
                        cursor: pointer;
                        border: none;
                        border-radius: 50px;
                        height: 50px;
                        width: 50px;
                        background-color: white;
                        display: none;
                        justify-content: center;
                        align-items: center;
                        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3),
                                    inset 0px 2px 4px rgba(255, 255, 255, 0.2),
                                    inset 0px -2px 4px rgba(0, 0, 0, 0.3);
                        z-index: 4;
                        
                        .arrow
                        {
                            color: var(--apple-black);
                            font-size: 24px;
                            padding: 10px;
                        }
                    }
                }
                .description-section:hover
                    {
                        .arrow-container{
                            display: flex;
                        }
                    }
                
            }
}

/* Styles for Section - 1 */
.box-space{
    cursor: pointer;
    white-space:normal;
    display:inline-block;
    scroll-snap-align: center;
}

.sup
{
    position: relative;
    font-size: 10px;
    vertical-align: sub;
    color: var(--apple-black);
}

.box-container
{
    position: relative;
    margin:10px;
    background-color: white;
    box-shadow: 0px 0px 5px;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    white-space:normal;
    display:inline-block;
    scroll-snap-align: center;

    .image-container
    {
        position: relative;
                
        img
        {
            position: relative;
            width: 100%;
            height: auto;
            
        }
    }
    .image-container::before
    {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 75%;
        z-index:2;
        background: linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,0.85), rgba(255,255,255,1));
    }

    .title
    {
        z-index: 2;
        position: relative;
        display: flex;
        justify-content: center;
        font-weight: 550;
    }
    .city
    {
        z-index: 2;
        position: relative;
        display: flex;
        justify-content: center;
    }
    .service
    {
        z-index: 2;
        position: relative;
        display: flex;
        justify-content: center;

        .tag
        {
            background-color: var(--logo-yellow);
            padding:5px;
            margin: 2px 2px 8px 2px;
            margin-bottom:10px;
            font-size: 12px;
            color:black;
            border-radius: 5px;
            cursor:pointer;
        }
    }
}
        
.box-container:hover{ box-shadow: 0px 0px 10px; }

/* Styles for Section - 2 */
.reasons-space{
    cursor:pointer;
    white-space:normal;
    display: inline-block;
    scroll-snap-align: center;
}
.reasons{
    cursor:pointer;
    width:180px;
    height:auto;
    padding:20px;
    margin:10px;
    border-radius:20px;
    color: var(--apple-black);
    font-size: 18px;
    font-weight:500;
    background-color: white;
    box-shadow: 0px 0px 5px;
    white-space:normal;
    display: inline-block;
    scroll-snap-align: center;
    
}
.reasons:hover{ box-shadow: 0px 0px 10px; }

/* Styles for Section - 3 */
.packages-space{
    cursor:pointer;
    white-space:normal;
    display: inline-block;
    scroll-snap-align: center;
}
.std-pck{
    border: 2px solid #ffc700;
}
.packages{
    cursor:pointer;
    position: relative;
    width:220px;
    height:auto;
    padding:20px;
    margin:10px;
    border-radius:20px;
    color: var(--apple-black);
    background-color: white;
    box-shadow: 0px 0px 5px;
    white-space:normal;
    display: inline-block;
    scroll-snap-align: center;
    
    .mostpopular
    {
        display: flex;
        justify-content: center;
        margin-top: -32px;
        margin-bottom: 10px;
        
        .tag
        {
            background-color: #ffc700;
            padding:4px 10px 4px 10px;
            border-radius:40px;
            font-weight: 500;
        }
    }
    
    .package-name{
        position: relative;
        text-align: left;
        font-size:24px;
        font-weight:550;
        margin-left:auto;
        margin-right:auto;
        margin-bottom: 10px;
        padding:10px;
        width:200px;
        background-color: var(--apple-gray);
        border-radius:10px;
    }
    .package-services{
        display:flex;
        align-items: center;
        
        .package-check{
            margin-left:5px;
            width:18px;
            height:18px;
            padding-right:5px;
        }
        
    }
    .package-price
    {
        padding: 10px;
        background-color: var(--logo-yellow);
        color: var(--apple-black);
        border-radius: 10px;
        font-weight: 600;
        font-size: 24px;
        display: flex;
        justify-content: center;
        margin: 10px auto 0px auto;
        
        .small{
            font-size:18px;
            margin-right:3px;
            margin-top:5px;
        }
        
        .cross{
            text-decoration: line-through;
            padding-right: 10px;
            color: #757575;
        }
        
    }
    
}
.packages:hover{ box-shadow: 0px 0px 10px; }
/* Styles for Section - 4 */
.points-space
{
    cursor:pointer;
    white-space:normal;
    display: inline-block;
    scroll-snap-align: center;
}
.points
{
    cursor:pointer;
    width:180px;
    height:auto;
    padding:20px;
    margin:10px;
    border-radius:20px;
    color: var(--apple-black);
    background-color: white;
    box-shadow: 0px 0px 5px;
    white-space:normal;
    display: inline-block;
    scroll-snap-align: center;
                        
    .icon
    {
        font-size:24px;
        background-color: var(--logo-yellow);
        width: 50px;
        height: 50px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom:10px;
        color: black;
                        
    }
    .title
    {
        font-size:20px;
        font-weight:500;
        margin-bottom:5px;
    }
    .descp
    {
        font-size:14px;
        color: var(--apple-black);
        text-align: justify;
        text-justify: inter-word;
    }
}
.points:hover, .points:focus { box-shadow: 0px 0px 10px; }


.references
{
    position: relative;
    width:100vw;
    background-color: var(--apple-gray);
    
    ol
    {
        position: relative;
        padding-left: 20px;
    }
}

.page-links
{
    position: relative;
    width:100vw;
    height:auto;
    background-color: var(--apple-black);
    color: white;
}
.page-links .page-links-section
{
    position: relative;
    width:1200px;
    margin:auto;
    display: flex;
    flex-direction: row;
    
    .left-side-section
    {
        display: flex;
        flex-direction: column;
        margin: 20px;
        
        .section1
        {
            margin-bottom: 10px;
            .heading
            {
                font-weight: 400;
                font-size: 14px;
                margin-bottom: 5px;
            }
            .data
            {
                display: flex;
                flex-direction: column;
                font-size: 14px;
            }
            .data a
            {
                margin-left: 10px;
                text-decoration: none;
                color: white;
                margin-bottom: 5px;
            }
        }
    }
    
}

@media only screen and (min-width: 1200px)
{
    .hero-section
    {
        .hero-content
        {
            margin-top:60vh;
            margin-left: 5vw;
            margin-right:5vw;
            
            .hero-title
            {
                font-size: 68px;
            }
        }
    }
    .box-container
    {
        width:300px;
        height: 260px;
        
        .image-container
        {
            width:300px;
            height: 200px;
        }
    
        .title{
            margin-top:-30px;
            font-size: 24px;
        }
    }
    .intro-section
    {
        .intro-content
        {
            width:640px;
            font-size:30px;
            font-weight:550;
        }
    }
    .section
    {
        .heading{
            text-align:left;
            margin-left:5vw;
        }
        .box-space{
            width:5vw;
        }
        .points-space{
            width: 5vw;
        }
        .packages-space{
            width:0vw;
        }
        .reasons-space{
            width:0vw;
        }
        .left-box-space{
            width:5vw;
        }
    }
    .ref-container
    {
        width:70vw;
        position: relative;
        margin:auto;
        padding: 20px 0px 20px 0px;
        font-size:14px;
        color: #383838;
        text-align: justify;
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1199px)
{
    .hero-section
    {
        .hero-content
        {
            margin-top:70vh;
            margin-left: 5vw;
            margin-right:5vw;
            
            .hero-title
            {
                font-size: 54px;
            }
        }
    }
    .box-container
    {
        width:300px;
        height: 260px;
        
        .image-container
        {
            width:300px;
            height: 200px;
        }
    
        .title{
            margin-top:-30px;
            font-size: 24px;
        }
    }
    .intro-section
    {
        .intro-content
        {
            width:640px;
            font-size:30px;
            font-weight:550;
        }
    }
    .section
    {
        .heading{
            text-align:left;
            margin-left:10vw;
        }
        .box-space{
            width:5vw;
        }
        .points-space{
            width:5vw;
        }
        .packages-space{
            width:0vw;
        }
        .reasons-space{
            width:0vw;
        }
        .left-box-space{
            width:5vw;
        }
    }
    .ref-container
    {
        width:70vw;
        position: relative;
        margin:auto;
        padding: 20px 0px 20px 0px;
        font-size:14px;
        color: #383838;
        text-align: justify;
    }
}


@media only screen and (min-width: 650px) and (max-width: 1024px)
{
    .hero-section
    {
        .hero-content
        {
            margin-top:60vh;
            margin-left: 5vw;
            margin-right:5vw;
            
            .hero-title
            {
                font-size: 42px;
            }
        }
    }
    .box-container
    {
        width:300px;
        height: 260px;
        
        .image-container
        {
            width:300px;
            height: 200px;
        }
        
        .title{
            margin-top:-25px;
            font-size: 24px;
        }
    }
    .intro-section
    {
        .intro-content
        {
            width:640px;
            font-size:30px;
            font-weight:550;
        }
    }
    .section
    {
        .heading{
            text-align:left;
            max-width:980px;
            margin-left:10vw;
            
        }
        .box-space{
            width:5vw;
        }
        .points-space{
            width:5vw;
        }
        .packages-space{
            width:10vw;
        }
        .reasons-space{
            width:5vw;
        }
    }
    .ref-container
    {
        width:90vw;
        position: relative;
        margin:auto;
        padding: 20px 0px 20px 0px;
        font-size:14px;
        color: #383838;
        text-align: justify;
    }
}
@media only screen and (max-width: 649px)
{
    .hero-section
    {
        .hero-content
        {
            margin-top:45vh;
            margin-left: 5vw;
            margin-right:5vw;
            
            .hero-title
            {
                font-size: 42px;
            }
        }
    }
    .box-container
    {
        width:250px;
        height: 220px;
        
        .image-container
        {
            width:250px;
            height: 167px;
        }
    
        .title{
            margin-top:-30px;
            font-size: 20px;
        }
    }
    .intro-section
    {
        .intro-content
        {
            width:100vw;
            font-size:24px;
            font-weight:550;
        }
    }
    .section{
        .heading{
            text-align: left;
            max-width:980px;
            margin-left:20px;
            margin-right:20px;
        }
        .box-space{
            width:25px;
        }
        .packages-space{
            width:5vw;
        }
        .reasons-space{
            width:5vw;
        }
        .right-box-space{
            width:80px;
        }
        .left-box-space{
            width:30px;
        }
    }
    .ref-container
    {
        width:90vw;
        position: relative;
        padding: 20px;
        font-size:14px;
        color: #383838;
        text-align: justify;
    }
}