@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.btn-primary{  
  background: linear-gradient(25deg,#F7E93F 0% ,#FB09B4 51%,#9100F8 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 30px;
    padding: 16px;
    transition: all 0.3s ease-out;
}
.btn-primary:hover{
    transform: scale(0.7);
}

.hamburger{
    display: none;
}

.text-h{
   background: linear-gradient(25deg,#F7E93F 0% ,#FB09B4 51%,#9100F8 100%);
    -webkit-background-clip: text;
    color: transparent;
}
header{
   background-color: #1A0B2E;
   
}
hr{
    border: 1px solid #412567;
}


nav{
    max-width: 1200px;
    
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    
} 

nav .menu{
    display: flex;
    list-style: none;
    gap: 32px;
    align-items: center;
}

nav .menu a{
    text-decoration: none;
    color: #FFFFFF;
    font-size: 16px;
}
nav h2{
    color: #FFFFFF;
    font-size: 35px;
    font-weight: 700;
}

/* banner section */
.banner{
    
    padding: 40px;
    text-align: center;
    background: url(Images/hero-bg.png);
    background-repeat: no-repeat;
    background-position:center ;
    
}
.banner-img{

    background: url(Images/hero-circle.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    padding: 70px 107px 81px 107px;
    
}
/* Animation banner image */

@keyframes pulse {
  0%, 100% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
}
.banner-img img{
    animation: pulse 3s infinite ease-in-out;
}

.new{
    font-size: 18px;
    font-weight: 600;
    background: #00FF88;
    color: #1A0B2E;
    padding: 10px 18px;
    border-radius: 15px;
    position: absolute;
    transform: translateX(60px);
}
.banner-img img{
    width: 130px;
}

.banner-content h1{
    margin-top: 15px;
    font-size: 55px;
    font-weight: 600px;
    color: #FFFFFF;
}
.banner-content p{
    font-size: 16px;
    color: #ffffff9e;
    margin-bottom: 15px;
}
.btn-2{
    
    color: #00FF88;
    border: 2px solid #15e081;
    font-size: 16px;
    padding: 10px 25px;
    border-radius: 20px;
    background-color: #1A0B2E;
    transition: all 0.3s ease-in; 
}
.btn-2:hover{
    transform: translateX(2px);
    color: #FB09B4;
    background-color: #FFFFFF;
}
 .btn-1{
    background: linear-gradient(25deg,#F7E93F 0% ,#FB09B4 51%,#9100F8 100%);
    color: #FFFFFF;
    padding: 10px 25px;
    border-radius: 20px;
    font-size: 18px;
    border: none;
    margin-right: 10px;
    
    transition: transform 0.3s ease-out;
    
 }
 .btn-1:hover{
    color: #77053a;
    transform: scale(1.1);
 }
 
 /* About section */
 .about{
    background-color: #1A0B2E;
    padding-top: 50px;
    padding-bottom: 100px;
 }
 .about-content,.rating{
    max-width: 1200px;
    margin: 0 auto;
   text-align: center;
    
 }
 .about-content h2{
    color: #FFFFFF;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 15px;
   
 }
 .about-content p{
    line-height: 20px;
     color: #ffffff72;
    font-size: 16px;
    margin-bottom: 80px;
    
    
 }

 .rating{
    padding-top: 80px;
    align-items: center;
    display: grid;
    grid-template-columns: repeat(4,1fr);
 }

 .bold-rating h2{
    font-size: 3rem;
    font-weight: 800;
    color: #00FF88;
 }
 .bold-rating p{
    color: #ffffff81;
    font-size: 16px;
    margin-top: 10px;
    font-weight: normal;
    
 }

 /* layout section */
 
 .layout{
    padding-bottom: 50px; 
    padding-top: 100px;
    background-color: #230E3D;
     /* background-color: #412567;  */
 }
 .h2{
    text-align: center;
    font-size: 45px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 40px;
 }
 .layout-container>* {
    background-color: #19073274;
    border-radius: 20px;
    padding: 30px;
 }
 .audio{
    grid-area: audio;
 }

 .device{
    grid-area: phone;
 }
 .location{
    grid-area: location;
 }
 .interview{
    grid-area: interview;
 }
 .resource{
    grid-area: resource;
 }
 .layout-container{
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 30px;
    grid-template-areas: 
    "audio phone phone" 
    "audio  location location"
    "interview interview resource"
    
 }
.layout-container h2{
    color: #FFFFFF;
    margin-top: 12px;
}
.layout-container p{
    color: #ffffff97;
    margin-top: 12px;
}

/*video card section */

iframe{
     /* max-width: fit-content; */
    /* border-radius: 15px;  */
    width: 100%;
    border-top-right-radius:15px;
    border-top-left-radius:15px;
}
 #Main{
     background-color: #1A0B2E; 
   
    padding-top: 80px;
 }
 #Main h2{
    color: #FFFFFF;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
 }
.card-container{
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
}
.card{
    /* padding: 20px; */
    background-color: #412567;
    width: 90%;
    max-width: 374px;
    border-radius: 15px;
    transition: transform 0.3s ease-in-out;
}
.card:hover{
    transform: translateY(-8px);
}

.video-h{
    margin-top: 15px;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 700;
}
.video-p{
    color: #ffffff94;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 16px;
}
.video-content{
    padding: 20px;
}
.min{
    color: #0ed87a;
    font-weight: 600;
    font-size: 17px;
    
}

/* Host Section */
section{
    background-color: #1A0B2E;
    padding-top: 60px;
      padding-bottom: 90px;    
}
.heading{
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    color: #FFFFFF;
    margin-bottom: 15px;
}
#Host{
    max-width: 1200px;
    margin: 0 auto;
    /* padding-top: 50px; */
    padding: 30px;
    background-color: #250D44;
    border-radius: 20px;
}
.host-container{
    display: flex;
    gap: 40px;
}
.name h2{
    color: #FFFFFF;
    font-size: 26px;
    font-weight: 700;
}
.name p{
    color: #ffffff88;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 15px;
}
.name img{
    margin-right: 10px;
}

.social-icon {

   display: flex;
   gap: 10px;
   list-style: none;
   
}
.social-icon li img{
    width: 30px;
    height: 35px;
    cursor: pointer;
    align-items: center;
    border-radius:20px;
    padding: 8px 8px;
    border: 1px solid #e4b038;
}
/*footer section*/
.foot{
    
    padding: 40px;
    background: url(Images/footer-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    /* background-size:auto ; */
    text-align: center;
}
.footer-h{
    color: #FFFFFF;
    font-size:30px ;
}
.footer-a {
    display: grid;
    gap: 40px;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(4,100px);
}
.footer-a a{
    text-decoration: none;
    color: #FFFFFF;
    font-size: 17px;
}
footer p{
    font-size: 16px;
    margin-top: 10px;
    color: #ffffffa8;
}


 /* mobile responsive */

 @media screen  and (max-width:576px){
    .menu,.btn-primary{
        visibility: hidden;
    }
    .hamburger{
        display: contents;
    }
    
    .menu {
        position: absolute;
        right: 0;
        margin-right: 30px;
 
    }
    .rating{
        grid-template-columns:repeat(2,1fr);
        gap: 20px;
    }
    .banner{
        /* padding: 20px;
        background-size: contain;  */
        background: url(Images/Image\ 1.png);
    }
    .banner-img{
        background-size: contain;
        background-position: center;
        padding: 30px 50px 30px 50px;
    }
    .banner-img img{
        width: 50px;
    }
    
    .banner{
        background-position: center;
        padding: 20px;
    }
    .new{
        position: absolute;
        padding: 10px 15px; 
         transform: translateX(35px); 
        
    }
   
     .layout-container{
            
            grid-template-areas: 
            "audio"
            "phone"
            "location"
            "interview"
            "resource"
            

        }

        .card-container{
            gap: 20px;
            grid-template-columns: repeat(1,1fr);
            
        }
        .card{
            margin: 0 auto;
        }

        .host-container{
            flex-direction: column;
            justify-content: center;
            align-items: center;    
        }
        .name{
            text-align: center;
        }
        .layout{
            padding-top: 50px;
        }
        .about{
            padding-top: 30px;
        }
        .about-content h2{
            font-size: 40px;
        }
        .about-content p{
            line-height: 22px;
        }

        #Main{
            padding-top: 50px;
        }
        .main-host{
            padding-top: 30px;
        }
        .social-icon{
            justify-content: center;
        }
        .btn-2{
           margin-top: 10px; 
        }
    
       .foot{
        background-repeat: no-repeat;
        /* padding: 30px 0px; */
        background: url(Images/Image\ 2.png);
        background-position: center;
        background-size:100% 100%;      
       }

       .footer-a{
        gap: 8px;
        display: grid;
        justify-content: center;
        align-items: center;
        grid-template-columns: repeat(2,1fr);
       }

 }