h1 {
    font-size: clamp(2.3rem, 5vw, 3.8rem);
    font-weight: 700;
    text-align: center;
}

h2 {
    font-size: clamp(2rem, 5vw, 3.1rem);
    font-weight: 700;
    color: #fff;
}

header h3 {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    color: #ccc;
    font-weight: 600;
}

p {
    font-size: clamp(1.1rem, 5vw, 1.8rem);
    color: aliceblue;
    font-weight: 400;
}

.btn {
    padding: 8px 20px;
    font-size: 1.3rem; 
    color: #0d6efd;
    background: #ccc;
    border-radius: 12px;
    transition: .4s ease all;
}

.btn:hover {
    background: linear-gradient(60deg, #01073a, #0d6efd);
    color: #fff;
    border: 1px solid #ccc;
    
}

header {
    background: url("./yoga-image/digital.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: #fff;
    
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;    
}

header h1 {
    text-shadow: 0px 2px 8px rgba(0,0,0,0.8);
}

header p {
    /* color: #D1D9E6; */
    color: #EAF6FF;
    text-shadow: 0px 2px 15px rgba(0,0,0,0.8);
}

/* carousel section */

.scroll{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
}

.scroll::-webkit-scrollbar {
    display: none;
}

.main-scroll {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    /* flex-wrap: wrap; */
    animation: spin 7s infinite linear;
    padding-right: 1rem;
    
}

@keyframes spin {
    form{transform: translateX(0);}
    to{transform: translateX(-100%);}
}

.scroll-card {
    /* flex: 1 1 0; */
    width: 200px;
    height: 200px;
    border: 2px solid #0d6efd; 
    color: #0d6efd;
    gap: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 20px;
}

.scroll-card img {
    width: 100px;
    height: 100px
} 


/* marketing card */

.marketing {
    text-align: center;
    background: linear-gradient(#01073a, #0d6efd);
}

.marketing-cards {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.mark-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-width: 380px;
    width: 100%;
    padding: 12px;
    border-radius: 1rem;
    gap: 8px;
}

.mark-card img {
    border-radius: 1rem;
}

.mark-card h3 {
    font-size: 2rem;
    color: #ccc;
}

.mark-card p {
    font-size: 1.2rem;
    color: #ccc;
    padding: 0 1rem;
    
}

/* marketing industries */

.industrie {
    text-align: center;
    color: #000;
    gap: 40px 0;
}

.industrie p{
    color: #919191;
    font-size: 1.3rem;
}

.marketing-intry {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.marketing-intry .indust-card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* border: 3px solid #0d6efd; */
    background: #000;
    max-width: 200px;
    width: 100%;
    padding: 1rem;
    border-radius: 1rem;
    gap: 1rem;
    margin-top: 2rem;
    position: relative;
}

.indust-card img {
    width: 110px;
    height: 110px;
}

.indust-card h3 {
    font-size: 1.3rem;
    color: #fff;
}

.indust-card::before,
.indust-card::after {
    content: "";
    position: absolute;
    background: conic-gradient(from var(--angle), transparent 70%, #0d6efd);
    /* filter: blur(5px); */
    inset: -5px;
    z-index: -1;
    border-radius: 1rem;
    animation: glowing-border 3s  infinite linear;
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes glowing-border {
    from{
        --angle: 0deg;
    }
    to {
        --angle: 360deg;
    }
}

/* about section */

.about {
    background: linear-gradient(45deg, #043b8d, #01073a);
    color: #fff;
    gap: 40px;
}

.about h3 {
    font-size: clamp(1.3rem, 5vw, 2rem);
    font-weight: 600;
    color: #fff;
}

.about p {
    font-size: clamp(1rem, 5vw, 1.3rem);
    color: #cac8c8;
}

.about p span {
    color: aquamarine;
}

.about-img{
    display: block;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.ab-img {
    border-radius: 1.8rem;
    max-width: 600px;
    box-shadow: 0 0 10px #fff;
    width: 100%;

}

.ab-img img {
    border-radius: 1.8rem;
}

/* faq section */

.main-faq {
    display: flex;
    /* justify-content: center; */
    /* align-items: center; */
    flex-direction: column;
    gap: 10px;
}

.faq-div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.faq-div .faq-text {
    background: #fff;
    color: #000;
    padding: 20px;
    font-size: clamp(.8rem, 5vw, 1.2rem);  
    display: none; 
    width: 100%;
    transition: .3s ease;
}

.faq-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;  
    border: 1px solid #919191;
    width: 100%;
    height: 60px;
    padding: 20px;
    color: #01073a;
    cursor: pointer;
    transition: .3s ease;
}

.faq-head h5 {
    font-size: clamp(1.1rem, 5vw, 1.8rem);
}

.faq-head:hover {
    background: #01073a;
    color: #fff;
}

.faq-icon{
    transition: .3s ease;
}

.faq-icon.rotate {
  transform: rotate(90deg);   /* right → down */
}

.faq-text.faq-show {
    display: block;
    animation: smooth 1s ease;
}

@keyframes smooth  {
    from{opacity: 0;}
    to{opacity: 1;}
}

.Footer p{
    font-size: 1.1rem;
}