/*  @media (min-width: 768px){      desktop */
    *{
        margin: 0px;
        padding: 0px;
    }
    .navbar{
        background-color: #000033;        
        padding: 8px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .navbar .logo img{
        width: 50px; 
        height: 50px;   
    }
    
    .navbar .menu a{
        color: snow;
        text-decoration: none;
        margin-right: 20px;

    }

.navbar .menu a:last-child {
        margin-right: 0px;
        
    }
 .hero{
    background-image: url("https://github.com/Mohak-Trivedi/xCruise/blob/main/assests/hero-cruise.png?raw=true");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; 
    height: 400px;
    color: snow;       
    display: flex;    
    align-items: center;
    justify-content: center;
    flex-direction: column; 
       
    }
    .heading{padding: 10px;}
    .heading h2{
        margin: 10px 0px;
    }
    
    .heading #para{
        font-size: .8rem;
    }
    .discover .popular{
        margin: 10px 0px;
        display: flex;
        align-items: center;
        
    }
     .discover .popular h4{
        margin-right: 7px;
        
        /* font-size: .8rem; 
        font-weight: bolder;       */
    } 
    .discover .pills{
        width: 120px;
        height: 27px;
        border-radius: 40px;        
        padding: 8px 7px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
        box-sizing: border-box;
        font-size: .8rem;
        text-align: center;
        margin-right: 10px;
    }
    .discover .pills img{
        width: 10px;
        height: 10px;
        border-radius: 50px;
        margin-right: 5px;
    }


    .banner{
        background-image: url("https://github.com/Mohak-Trivedi/xCruise/blob/main/assests/caribbean-cruise.png?raw=true");
        background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; 
    width: 100vw;
    height: 300px;
    color: snow;  
    display: flex;     
    align-items: flex-end;
    justify-content: flex-start;
    padding-left: 20px;
    }
    .banner h4{
        margin-bottom: 0px;
    }
    .banner p{
        margin-top: 0px;
    }
   
    .btn{
            background-color: #f7500f;
            color: snow;
            border: none;
            padding: 5px 10px;

    }

    .cards{
        height: 500px; 
        width: 100vw;       
        padding: 10px 0px;       
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr); 
        grid-gap: .5rem; 
    }
    
    
     .card{
        cursor: pointer; 
        position: relative;      
    } 
    .card img {
        width:100%;
        height: 100%;
    }

    .card .imginfo{
        left: 2%;
        color: snow;
        position:absolute;
        top: 80%;
    }

    .imginfo h5{
        margin-bottom: 0px;
    }

    .imginfo p{
        font-size: .5rem;
        margin-top: 0px;
    } 
    #contact{
        text-align: center;        
    }
    
    #contact h3{
        width: fit-content;
        margin: 20px auto 40px auto;
        position: relative;
        
    }

    #contact h3::after{        
        content: '';
        position: absolute;
        bottom: -10px;
        width: 110%;
        height: 4px;        
        left:-5%;
        background-color: #f1a71d;

    }

    #contact .contact_info > div{
        padding: 5px;        
        border: 1px solid black;        
        width: 40vw;        
    }

    #contact .contact_info > div h4{
        margin: 5px;
    }

    #contact .contact_info{
        margin-bottom: 20px;
        padding: 0% 7%; 
        display: flex;
        align-content: center;
        justify-content: space-around;
    }

    .footer{
        color: #ffffff;
        background-color: #000033;
        display: flex;
        justify-content: space-around;
        align-content: center;
        padding: 20px;
    }

    .social-icons img{
        width: 20px;
        height: 20px;

    }

    .footer_rights{
        text-align: center;
        color: #ffffff;
        background-color: #000033;
        padding: 0px 0px 30px;                
        box-shadow: 5px 5px 5px  3px #bcbbf1c9;
    }

    
    .footer h4{
        color: #efa81c;
        margin: 10px 0px;
    }
    .footer p{
        margin-bottom: 5px;
    }

@media (min-width: 480px) and (max-width: 768px){   /* tablet */
    .navbar{
        background-color: #000033;        
        padding: 8px 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;        
        margin-right:0px;
        
    
    }

    .hero{
        text-align: center;
    }
    .cards{
    grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr); 
    }

    #contact .contact_info{
     flex-direction: column;
     
    }

    .footer{
        flex-direction: column;
        justify-content: center;          
        
        align-items: center;  
           
    }
     .footer p, .footer h4{
       border: 2px solid orange;
       text-align: center;
    }
    .footer h4{
        margin-top: 30px;
    }

    .social-icons{
        text-align: center;
    }
     

}
@media (max-width: 480px){  /* mobile */
    .navbar{
        background-color: #000033;        
        padding: 8px 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;       
        margin-right:0px;
    }
    .hero{
        text-align: center;
    }

    .cards{
        height: auto;
        grid-template-columns: repeat(1, 1fr);
            grid-template-rows: repeat(8, 1fr); 
        }

         #contact .contact_info{
            flex-direction: column;
            justify-content: center;
            
           } 
           #contact .contact_info > div{                                    
            width: 80vw;    
            margin-bottom: 20px;    
        }

        
        .footer{
            flex-direction: column;
            justify-content: center;          
            align-items: center;  
               
        }
         .footer p, h4{          
           text-align: center;
        }
        .social-icons{
            text-align: center;
        }

        .footer h4{
            margin-top: 30px;
        }
         

}