@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300;400;700&display=swap');

    /* General styling */
    body, html {
        font-family: 'Raleway';
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        scroll-behavior: smooth;
    }
    /* Adjusting the logo size for mobile screens */

    #navbarSupportedContent {
        flex-grow: 1;
        justify-content: center;
    }
@media (min-width:425){
    .text-white{
        height: 200px;
    }
}
    /* Hide the right contact section on smaller screens */
    @media (max-width: 992px) {
        
        #email-nav   {
            display: none; 
        }
        .navbar-toggler  #viber-nav i, #email-nav i, #email-nav p  {
            display: none; /* Hide the email and Viber nav */
        }
        .navbar-toggler  #email-nav i, #viber-nav i, #viber-nav p  {
            display: none; /* Hide the email and Viber nav */
        }
    }
    
    /* Align the navigation items better for smaller screens */
    @media (max-width: 769px){
        .navbar-nav {
        flex-direction: column;
        text-align: center;
        }
    
        .navbar-nav .nav-link {
        padding: 10px;
        }
    
        #com-pro {
        width: 100%;
        }
    
        .dropdown-menu {
        text-align: left;
        width: 100%;
        }
    
 
    
    }
    @media (min-width:1024px){
        .navbar-nav{
            font-size: 10px;
            width: 800px;
            
        }
      
    }
    @media (min-width:992px){
        .navbar-nav{
            width: 800px;
        }
    }
    @media (max-width:1657px){
        #viber-nav i, #viber-nav p,#email-nav i, #email-nav p{
            display: none;
        }
    }
    
    /* Navbar link hover effect */

    #navbar {
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
        padding: 15px 20px;
        position: relative;
        font-family: 'Dongle', sans-serif;
        font-size: 25px;
    }

    #navbar::after {
        background: transparent;
        bottom: 0;
        content: "";
        display: block;
        height: 2px;
        left: 50%;
        position: absolute;
        background: red;
        transition: width 0.3s ease 0s, left 0.3s ease 0s;
        width: 0;
    }

    #navbar:hover::after {
        width: 100%;
        left: 0;
    }

    /* Responsive navbar adjustments */
    @media (max-width: 767px) {
        #navbar {
            font-size: 20px;
            padding: 10px;
        }

        #logo {
            width: 120px;
        }
    }
    .fa-regular, .fa-brands {
        font-size: 1.2rem;
        color: #333; /* Customize icon color */
        margin-right: 10px;
        cursor: pointer;
    }
    #contact-tag{
        font: league spartan;
        font-weight: bold;
        font-size: 15px;
        margin-right: 50px;
    }

    /* Logo styling */
    #logo {
        width: 200px;
    }

    /* Parallax effect */
    #parallax_section   {
        background: url('../img/ftc-people.png') no-repeat top left fixed;
        background-size: cover;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
        color: white;
        transition: 5s;
        animation-name: animate;  /*animation */
        animation-direction: alternate-reverse;
        animation-duration: 10s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-play-state: running;
        animation-timing-function: ease-in-out;
    }
    @keyframes animate {
        0%{
            background-image: url(../img/ftc-people.png);
        }50%{
            background-image: url(../img/ftc-workplace.png);
        }

    }

    .parallax-content {
        /* position: relative; */
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 30px;
    }

    #parallax_section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1;
    }

    /* Adjust the image to stay at the top left */
    #icon-hero-page {
        width: 200px;
        height: 200px;
        margin-left: 20px;
        /* position: absolute;
        top: 20px;
        left: 20px;
        z-index: 3; */
    }

    @media (max-width: 767px) {
        #icon-hero-page {
            width: 80px;
            height: 80px;
            top: 10px;
            left: 10px;
        }
    }
    @media (max-width: 1091px) {
        #icon-hero-page {
            width: 80px;
            height: 80px;
            top: 10px;
            left: 10px;
        }
    }

    /* Adjust the text style */
    .text-white {
        /* line-height: 80px; */
        font-family: 'Raleway', sans-serif;
        font-size: 70px;
        /* margin-top: 250px; */
        margin-left: 20px; 
        height: 320px;
    }

    @media (max-width: 1091px) {
        .text-white {
            font-size: 40px;
            line-height: 40px;
            margin-top: 120px; 
            margin-left: 10px;
            height: 140px;
        }
    }
    
    @media (max-width: 768px) {
        .text-white {
            height: 140px;
        }
    }
    
    @media (min-width: 320px) {
        .text-white {
            height: 354px;
        }
    }
    
    @media (max-width: 375px) {
        .text-white {
            height: 374px;
        }
    }
    @media(min-width:430px){
        .text-white{
            height: 300px;
        }
    }
    @media(min-width:560px){
        .text-white{
            height: 280px;
        }
    }
    @media(min-width:616px){
        .text-white{
            height: 220px;
        }
    }
    @media(min-width:690px){
        .text-white{
            height: 150px;
        }
    }
    @media(min-width:1092px){
        .text-white{
            height: 300px;
        }
    }

    @media (min-width: 0px) and (max-width:567px){
            .parallax-content img{
                width: 70px !important;
                height: 70px !important;
            }
            .parallax-content{
                margin-top: 10px !important;
            }
            .text-white{
                margin-top: 90px !important;
                font-size: 40px !important;
                height: 400px !important;
            } 
    }

    @media (min-width: 577px) and (max-width: 768px) {
        .parallax-content img{
            width: 100px !important;
            height: 100px !important;
        }
        .text-white{
            font-size: 50px !important;
            line-height: 50px !important;
            height: 400px !important;
        }
    }

    @media (min-width:  769px) and (max-width: 992px) {
        .parallax-content img{
            width: 100px !important;
            height: 100px !important;
           
        }
        .text-white{
            font-size:60px !important;
            line-height: 60px !important;
            height: 400px !important;
        }
    }
    @media (min-width:993px){
        .text-white{
            font-size: 70px !important;
            line-height: 70px !important;
            height: 400px !important;
        }
    }
    @media (max-width:302px){
        .text-white{
            font-size: 35px !important;
        }
    }
     
    
    /* Adjust button styling */
    #fixed-btn {
        margin-top: 20px;
        /* position: relative; */
        padding: 10px 15px;
        width: 510px;
        margin-left: 20px;
        height: 60px;
        color: black;
        background-color: #D9D9D9;
        border: none;
        font-size: 25px;
        text-decoration: none;
        margin-bottom: 50px;

    }


    #fixed-btn i {
        color: red;
        margin-right: 15px;
        padding-left: 30px;
    }

    #fixed-btn:hover {
        background-color: red;
        color: #fff;
    }

    #fixed-btn:hover i {
        color: #fff;
    }

    @media (max-width: 767px) {
        #fixed-btn {
            width: 280px;
            font-size: 12px;
            height: 40px;
            margin-left: 10px;
        }
    }
    @media (max-width: 1091px) {
        #fixed-btn {
            width: 280px;
            font-size: 12px;
            height: 40px;
            margin-left: 10px;
        }
    }
    /* Regular Content Section */
    .container {
        padding-left: 60px;
        padding-right: 60px;
        text-align: center;
    }

    @media (max-width: 767px) {
        .container {
            padding-left: 20px;
            padding-right: 20px;
        }

        .text-center {
            font-size: 18px;
        }
    }
    @media (max-width: 1091px) {
        .container {
            padding-left: 20px;
            padding-right: 20px;
        }

        .text-center {
            font-size: 18px;
        }
    }

    /* Mobile adjustments for text */
    .text-center {
        font-family: 'Raleway', sans-serif;
        text-align: left;
    }

    @media (max-width: 1091px) {
        .text-center {
            text-align: center;
        }
    }


    @media (max-width:1091px) {
        .container {
            padding-left: 20px;
            padding-right: 20px;
        }

        .text-center {
            font-size: 18px;
        }
    }

    /* Mobile adjustments for text */
    .text-center {
        font-family: 'Raleway', sans-serif;
        text-align: left;
    }

    @media (max-width: 1091px) {
        .text-center {
            text-align: center;
        }
    }
    /* FACILIIES */
    #container-facilities{
        position:relative;
    }
    #img_faci{
        opacity: 1;
        display: block;
        width: 100%;
        height: auto;
        transition: .5s ease;
        backface-visibility: hidden;
    }
    .mid{
        transition: .5s ease;
        opacity: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%)
    }
    .click-me-btn{
      
        font-size: 16px;
        padding: 16px 32px;
    }
    #container-facilities:hover #img_faci{
        opacity: 0.2;
        cursor:pointer;
    }
    #container-facilities:hover .mid {
        opacity: 1;
      }

    /* SERVICES */

    #container-facilities:hover #first-image, #container-facilities:hover #second-image,#container-facilities:hover #third-image,#container-facilities:hover #fourth-image
    ,#container-facilities:hover #fifth-image,#container-facilities:hover #six-image,#container-facilities:hover #seven-image{
        opacity: 0.2;
        cursor:pointer;
    }
 
    

    /* SCROLLING ANIMATION */
    @keyframes appear {
        from {
            opacity: 0;
            transform: translateX(-100px);
        }
        to {
            opacity: 1;
            transform: translateX(0px);
        }
    }

    #block,  #container,#main-text-center, #accreditation-contents,#contacts,#contact-appointment,#dept-title
    ,#whatwedo-index, #slider-team-title,#wrapper-slider{
        animation: appear linear;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
    }





    /* ABOUT CSS */



    

    #about-btn{
        margin-left: 850px;
        margin-top: 50px;
        margin-bottom: 50px;
        width: 200px;
        padding: 10px;

    }
    #about-btn i {
        margin-left: 20px;
    }
    #about-btn h1{
        font-size: 20px;
        margin-left: 15px;
        margin-top: 2px;
    }

    #com-pro{
        margin-top: 5px;
    }
    #about-btn-content{
        margin-top: 20px;
        position: relative;
        padding: 10px 15px;
        width: 200px ;
        margin-left: 20px;
        height: 60px;

        color: black;
        background-color: #fff;
        border: none;
        font-size: 20px;
        text-decoration: none;
        background-color: #D9D9D9;
    }
    #about-btn-content i{
        color: red;

    }

    /* MISSION VISION */
    #cards #card-1:hover{
        transform: scale(1,1);

    }
    #cards:has(#card-1:hover) > #card-1:not(:hover){
        filter: blur(10px);
        transform: scale(0.9 , 0.9);
        
    }
    #card-1{
        transition: all 0.3s ease;
    }

    /* CONTACT */
    #contact, #from_name, #message,#phone_number, #company, #formControlInput,#phone_number,#email_id{
        border-top: none;
        border-right: none;
        border-left: none;
        border-bottom: 1px solid red;
        font-size: 20px;
    }

    #p-title{
        font-size: 20px;
    }
    #contact-content h1{
        font-size: 200px;
        color: #FF0000;
        font-weight: bold;
    }
    #whole-content-contact{
        margin-left: 200px;
    }
    #contact-btn{
        margin-top: 20px;
        position: relative;
        padding: 10px 0px;
        width: 200px ;
        margin-left: 20px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: black;
        background-color: #fff;
        border: none;
        font-size: 23px;
        text-decoration: none;
        background-color: #D9D9D9;
    }

    #contact-btn i, #appointment-btn i{
        color: red;
        margin-right: 5px;
    }

    #contact-btn:hover, #appointment-btn:hover, #about-btn-content:hover {
        background-color: red;
        color: #fff;
    }

    #contact-btn:hover i, #appointment-btn:hover i, #about-btn-content:hover i {
        color: #fff;
    }
    #appointment-btn{
        margin-top: 20px;
        position: relative;
        padding: 10px 15px;
        width: 350px ;
        margin-left: 20px;
        height: 60px;

        color: black;
        background-color: #fff;
        border: none;
        font-size: 23px;
        text-decoration: none;
        background-color: #D9D9D9;
    }

@media (max-width: 640px) {
    #p-title p{
        font-size: 20px;
    }
    #contact-content h1{
        font-size:120px;
    }
    #formContainer{
        width: 320px;
    }
}

    /* LOADER */
    #thankYouMessage {

        display: none;

        font-size: 1.2em;
        
    flex-direction: column;

    text-align: center;

    height: auto;

    }

    #loader {

        display: none;

        border: 5px solid #f3f3f3;

        border-radius: 50%;

        border-top: 5px solid red;

        width: 40px;

        height: 40px;

        animation: spin 1s linear infinite;

        margin: 10px;

    }

    @keyframes spin {

        0% { transform: rotate(0deg); }

        100% { transform: rotate(360deg); }

    }


    /* FOOTER */
    #footer-command:hover{
        color: #0033ff;
    }
    /* TEAM */
    /* #wrapper-slider{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #container-slider{
        height: 600px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: start;
    }
    #card-slider{
        width: 380px;
        background-size: cover;
        cursor: pointer;
        overflow: hidden;
        margin: 0px 10px;
        display: flex;
        align-items: flex-end;
        transition: .6s cubic-bezier(.28, -0, .03,0,.99);
        box-shadow: 0px  10px 30px -5px rgba(0, 0, 0, 0.8);
        transition-duration: 0.4s;
    }

    #card-slider >  #row-slider{
        color: white;
        display: flex;
        flex-wrap: nowrap;
    }
    #card-slider >  #row-slider > #icon {
        background: #233;
        color: white;
        border-radius: 50%;
        width: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 15px;    
    }
    #card-slider >  #row-slider > #description{
        display: flex;
        justify-content: center;
        flex-direction: column;
        overflow: hidden;
        height: 80px;
        width: 520px;
        opacity: 0;
        transform: translateY(30px);
        transition-delay: .3s;
        transition: all .3s ease;
    } 

    #description p {
        color: #d0d0da;
        font-weight: bold;
        padding-top: 5px;

    }

    #description h4{
        text-transform: uppercase;
    }
    input:checked + #card-slider:hover{
        width: 600px;
    }
    input + #card-slider:hover{
        width: 600px;
        transition: 0.4s ease-in-out;
       
    }
   


    input:checked + #card-slider #description {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    #card-slider[for="c1"]{
        background-image: url(../img/channels.jpg);
    }
    #card-slider[for="c2"]{
        background-image: url(../img/creativer.jpg);
    }

    #card-slider[for="c3"]{
        background-image: url(../img/expertise.jpg);
    }

    #card-slider[for="c4"]{
        background-image: url(../img/Events.jpg);
    } */
    /* TEAM CONTENT */
    @media (max-width: 576px) {
        /* Example of further adjustments for very small screens */
        #content {
            margin-top: 80px; /* Adjusting margin for very small screens */
        }
    
        #title-content {
            font-size: 24px; /* Smaller font size for h1 on mobile */
        }
    
        #para-content {
            font-size: 14px; /* Smaller font size for paragraphs */
        }
    }
    
/* PARTNERS / INDEX */
.logos{
    overflow: hidden;
    padding: 60px 0;
    position: relative;
    white-space: nowrap;
    background: white;
}
.logos-slide{
    display: inline-block;
    white-space: nowrap;
    animation: 35s slide infinite linear;
}
.logos:hover .logos-slide{
    animation-play-state:paused ;
}
.logos-slide img{
    height: 80px;
    margin: 0 40px;
}
@keyframes slide {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-100%);
    }
}
.logos:before, .logos:after{
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    content: "";   
    z-index: 2;
}
.logos:before{
    left: 0;
    background:linear-gradient(to left, rgba(255,255,255,0), white) ;
}
.logos:after{
    right: 0;
    background:linear-gradient(to right, rgba(255,255,255,0), white) ;
}






/* Media query in facilities */

@media (max-width: 767px) {
    #faci-title h4 {
        font-size: 1.5rem; /* Smaller font for mobile devices */
    }

    #faci-desc ul {
        font-size: 1rem; /* Adjust list item font size */
    }
}

/* @media(max-width:1440px){
    #faci-pic img{
        width: 480px;
    }
    #faci-pic video{
        width: 480px;
    }
}
@media (max-width:1024px){
    #faci-pic img{
        width: 350px;
    }
    #faci-pic video{
        width: 350px;
    }
    #faci-desc li {
        font-size: 15px;
    }
}

@media (max-width: 768px){
    #faci-pic{
        display:flex;
        justify-content:center;
        align-items:center;
    }
    #faci-title{
        display:flex;
        justify-content:center;
        align-items:center;
    }
    #faci-desc{
        margin-left:200px;
        margin-top:15px;
    }
} */



/* apply */
#apply-form {
    border: 2px solid rgba(217, 217, 217, 0.50);
    width: 500px;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    
  }

  #apply-form:hover {
    border-color: red;
    cursor: pointer;
  }

  #apply-form:hover #title {
    text-decoration: underline;
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}



/* Media query in history index page */
@media (max-width:480px){
    #history h2{
        font-size:15px !important;
    }
    #line{
        width: 100px !important;
    }
}
@media (max-width:767px){
    #history h2{
        font-size: 20px !important;
        padding-left: 2.5rem !important;
        margin-bottom: 0px !important;
    }
    #history p {
        font-size: 15px !important;
        line-height: 20px !important;
    }
    #line{
        width: 130px !important;
    }
    #history{
        height: 300px !important;
    }
}
@media (max-width:1024px){
    #history h2{
        font-size: 20px !important ;
        padding-left: 2rem !important;
        margin-bottom: 0px !important;
    }
    #line{
        width: 120px !important;
    }
    #history p{ 
      font-size: small;
      line-height: 20px;
      width: 150px;
    }
    #history{
        height: 300px !important;
    }
}
@media (max-width:1399px){
    #history h2{
        font-size: 20px !important ;
        padding-left: 2rem !important;
        margin-bottom: 0px !important;
    }
    #line{
        width: 120px !important;
    }
    #history p{ 
      font-size: small;
      line-height: 20px;
      width: 150px;
    }
    #history{
        height: 300px !important;
    }
}
@media (min-width:1200px){

}
/* @media(max-width:1025px){
    #history h2{
        font-size: 20px !important;
        padding-left: 30px !important;
        
    }
    #line{
        width: 120px !important;

    }
    #history p{
        font-size: small !important;
        line-height: 20px !important;
        width: 150px !important;
    }
} */

/* @media (max-width: 768px){
    #history h2{
        font-size: larger;
        padding-left: 20px;
    }
    #history p{
        font-size: small;
        line-height: 15px;
    }
    

} */


/* media query in key officer */

@media (max-width: 1024px){
    #officer_div{
      margin-top: 100px !important;
      display: flex !important;
      justify-content: center !important;
    }
    #key_officer img{
      width: 200px !important;
      height: 200px !important;
    }
    #key_officer{
      width: 280px !important;
      height: 300px !important;
      margin-bottom: 10px !important;
    }
    #key_officer #name_officer {
      margin-left: 35px !important;
    }
  }
  
  

  @media (max-width: 768px){
    #key_officer img{
      width: 120px !important;
      height: 200px !important;
      margin-bottom: 15px !important;
    }
    #key_officer {
        width: 200px  !important;
        height: 250px !important;
    }
    #op_manager {
        margin-left:30px !important;
    }
    #officer_div{
      display: flex !important;
      justify-content: center !important;
    }
    #key_officer #name_officer{
      margin-left: 35px !important;
      margin-top: 5px !important;
    }
  }
  @media (max-width: 425px){
      #key_officer{
        width: 140px !important;
        height: 240px !important;
        margin-bottom: 10px !important;
      }
      
  
      #officer_div{
        display: flex !important;
        justify-content: center !important;
      }
  }
  @media (max-width:375px){
    #officer_div{
      margin-top: 30px !important;
    }
  }
  /* track record */
/* 
  @media (max-width:1440px){
    #track_record img{
      width: 500px !important;
    }

  }
  @media (max-width:1024px){
    #track_record img{
      width: 400px !important;
      margin-left: 100px !important;
    }
    #record_desc div{
      font-size: 15px !important;
      width: 350px !important;
      margin-left: 100px !important;
    }
    #track_title h1{
      padding-left: 30px !important;
    }
  }

  @media (max-width:768px){
    #track_record img{
      width: 500px !important;

    }
    #record_desc div{
      font-size: 25px !important;
      width: 500px !important;
      margin-left: 100px !important;
    }
    #track_title h1{
      display: flex !important;
      justify-content: center !important;
    }

  }
  @media (max-width:425px){
    #track_record img{
      width: 250px !important;

    }
    #record_desc div{
      font-size: 15px !important;
      width: 250px !important;
      margin-left: 100px !important;
    }
    #track_title h1{
      font-size: 20px !important;
      display: flex !important;
      justify-content: center !important;
    }

  } */

  @media (max-width: 767px) {
    #track_title h1 {
        font-size: 1.5rem; /* Smaller title text on mobile */
    }

    #record_desc .p-4 {
        font-size: 1rem; /* Smaller font size inside description boxes on mobile */
    }
}


  /* media query in service */


  @media (max-width:1440px) {
    #service img{
      width: 1100px;
    }
    #service #service_pic{
      width: 500px !important;
    }
  }

  @media (max-width:1024px) {
    #service img{
      width: 1000px;
    }
    #service_pic img{
      width: 500px !important;
    }
  }

  @media (max-width:768px) {
    #service img{
      width: 800px;
    }
    #service_pic img{
      width: 400px !important;
      margin-left: 10px !important;
    }
  }

  @media (max-width:425px) {
    #service img{
      width: 400px;
    }
    #service h2{
      font-size:20px !important;
    }
    #service h4{
      font-size:15px !important;
    }
    #service_pic img{
      display: none !important;
    }
  } 
/* media query in apply file */
#apply-div:hover{
    border: 3px solid red !important;
    cursor: pointer !important;
}
#apply-div:hover #title{
    text-decoration: underline !important;
}
  @media(max-width:991px){
    #content-1{
        display: none !important;
    }

  }
   


  /* BLOG PAGE */

  /* award */
  .contents-swiper{
    display: flex;
    align-items: center;
    justify-content: center;
   
}
#slide-container{
    max-width: 1520px;
    width: 100%;
    
    padding: 40px 0;
}
.slide-content{
    margin: 0 80px;
    overflow: hidden;
}
#award-card{
    width: 320px;
    border-radius: 25px;
    background-color: #fff;
    height: 500px;
    
}

.image-content,
.card-content{
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
}
.image-content{
    row-gap: 5px;
    position: relative;
}

.card-image-award{
  position: relative;
  height: 150px;
  width: 150px;
  background: #fff;
  padding: 3px;
  border-radius: 50%;
}
.card-image-award .card-img{
    object-fit: cover;
}
.title-award{
    font-size: 24px;
    font-weight: 500;
    color: #333;
}
.description-award{
    font-size: 16px;
    color: #707070;
    text-align: start;

}









/* Segment Page */

.circle-container, .center-circle  {
    position: relative; /* Change to relative to follow the document's flow */
    margin: 50px auto; /* Center it horizontally with margin */
    width: 220px;
    height: 200px;
    background-color: red;
    color: white;
    border-radius: 50%;
    border: 10px solid white;
    text-align: center;
    line-height: 1.4;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    z-index: 2; /* Ensure it's on top of segments */
}

.segment {
    position: absolute; /* Segments still need absolute positioning */
    width: 360px;
    height: 358px;
    background-color: transparent;
    text-align: center;
    color: white;
    font-size: 12px;
    font-weight: bold;
    clip-path: polygon(-4% 37%, 100% 0, 100% 100%);
    transform-origin: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    z-index: 1; /* Segments stay behind the center-circle */
    font-size: 20px;
    text-decoration: none;
}
.segment:hover {
    color:#d2d2d2;
}
/* Styling individual segments */
.segment1 {
    background-color: #ff6a5f;
    transform: rotate(0deg) translate(200px);
}

.segment2 {
    background-color: #ff7b6e;
    transform: rotate(51.4deg) translate(200px);
}

.segment3 {
    background-color: #f04742;
    transform: rotate(102.8deg) translate(200px);
}

.segment4 {
    
    background-color: #ff6a5f;
    transform: rotate(154.2deg) translate(200px);
}

.segment5 {
    background-color: #dc3730;
    transform: rotate(205.6deg) translate(200px);
}

.segment6 {
    background-color: #ff8c8b;
    transform: rotate(257deg) translate(200px);
}

.segment7 {
    background-color: #f04742;
    transform: rotate(308.4deg) translate(200px);
}




.segment #segment-1{
    padding-left: 80px;
  }

  .segment:hover #segment-1 {
    text-decoration:underline;
  }
  .segment:hover #segment-2 {
    text-decoration:underline;
  }
  .segment:hover #segment-3 {
    text-decoration:underline;
  }
  .segment:hover #segment-4 {
    text-decoration:underline;
  }
  .segment:hover #segment-5 {
    text-decoration:underline;
  }
  .segment:hover #segment-6 {
    text-decoration:underline;
  }
  .segment:hover #segment-7 {
    text-decoration:underline;
  }



  @media (min-width: 0px) and (max-width:480px){
    #main-circle {
      width:100px !important;
      height:100vh !important;
      display: flex !important;
      justify-content: center !important;
      align-items:center !important;
    }
    .circle-container, .center-circle{
      width:165px !important;
      height: 151px !important;
      font-size: 15px !important;
    }
    .segment{
        width: 91px !important;
        height: 130px !important;
        clip-path: polygon(-55% 78%, 100% 0, 100% 100%);

    }
    .segment p {
      font-size:9px !important;
    
    }
    .segment1{
      transform: rotate(0deg) translate(100px)
    }
    .segment2{
      transform: rotate(51.4deg) translate(100px);
    }
    .segment3{
      transform: rotate(102.8deg) translate(100px);
    }
    .segment4{
      transform: rotate(154.2deg) translate(100px);
    }
    .segment5{
      transform: rotate(205.6deg) translate(100px);
    }
    .segment6{
      transform: rotate(257deg) translate(100px);
    }
    .segment7{
      transform: rotate(308.4deg) translate(100px);
      
    }
    .segment #segment-1{
      padding-left: 16px !important;
      padding-top: 26px !important;
    }
    .segment #segment-2{
      padding-right: 13px  !important;
      padding-top: 20px !important;
    }
    .segment #segment-3{
      padding-right: 38px !important;
    }
    .segment #segment-4{
      padding-bottom:20px !important;
      padding-right: 27px !important;
      font-size: 8px !important;
    }
    .segment #segment-5{
      padding-right:6px !important;
      padding-bottom:10px !important;
    }
    .segment #segment-6{
      padding-left: 22px !important;
    }
    .segment #segment-7{
      padding-left: 21px !important;
    }
  }

   @media (min-width:481px) and (max-width: 767px){
    #main-circle {
      width:100px !important;
      height:100vh !important;
      display: flex !important;
      justify-content: center !important;
      align-items:center !important;
    }
    .circle-container, .center-circle{
      width:165px !important;
      height: 151px !important;
      font-size: 15px !important;
    }
    .segment{
        width: 243px !important;
        height: 204px !important;
        clip-path: polygon(15% 55%, 105% 0, 100% 100%);
    }
    .segment p {
      font-size:14px !important;
    
    }
    .segment1{
      transform: rotate(0deg) translate(100px)
    }
    .segment2{
      transform: rotate(51.4deg) translate(100px);
    }
    .segment3{
      transform: rotate(102.8deg) translate(100px);
    }
    .segment4{
      transform: rotate(154.2deg) translate(100px);
    }
    .segment5{
      transform: rotate(205.6deg) translate(100px);
    }
    .segment6{
      transform: rotate(257deg) translate(100px);
    }
    .segment7{
      transform: rotate(308.4deg) translate(100px);
      
    }
    .segment #segment-1{
      padding-left: 114px !important;
      padding-top: 26px !important;
    }
    .segment #segment-2{
      padding-left: 16px !important;
      padding-top: 50px !important;
    }
    .segment #segment-3{
      padding-right: 39px !important;
      padding-top: 40px !important;
    }
    .segment #segment-4{
      padding-right: 92px !important;
      font-size: 13px !important;
    }
    .segment #segment-5{
      padding-right: 74px !important;
      padding-bottom: 17px !important;
    }
    .segment #segment-6{
      padding-left: 30px !important;
      padding-bottom: 50px !important;
    }
    .segment #segment-7{
      padding-left: 57px !important;
    }
  
  } 



  @media (min-width:768px) and (max-width:991px){
    #main-circle {
      width:100px !important;
      height:100vh !important;
      display: flex !important;
      justify-content: center !important;
      align-items:center !important;
    }
    .circle-container, .center-circle{
      width:165px !important;
      height: 151px !important;
      font-size: 15px !important;
    }
    .segment{
        width: 391px !important;
        height: 286px !important;
        clip-path: polygon(25% 56%, 105% 0, 122% 112%);
    }
    .segment p {
      font-size:18px !important;
    
    }
    .segment1{
      transform: rotate(0deg) translate(100px)
    }
    .segment2{
      transform: rotate(51.4deg) translate(100px);
    }
    .segment3{
      transform: rotate(102.8deg) translate(100px);
    }
    .segment4{
      transform: rotate(154.2deg) translate(100px);
    }
    .segment5{
      transform: rotate(205.6deg) translate(100px);
    }
    .segment6{
      transform: rotate(257deg) translate(100px);
    }
    .segment7{
      transform: rotate(308.4deg) translate(100px);
      
    }
    .segment #segment-1{
      padding-left: 191px !important;
      padding-top: 39px !important;
    }
    .segment #segment-2{
      padding-left: 36px !important;
      padding-top: 90px !important;
    }
    .segment #segment-3{
      padding-right: 56px !important;
      padding-top: 75px !important;
    }
    .segment #segment-4{
      padding-right: 176px !important;
      font-size: 17px !important;
    }
    .segment #segment-5{
      padding-right: 151px !important;
      padding-bottom: 76px !important;
    }
    .segment #segment-6{
      padding-left: 13px !important;
      padding-bottom: 144px !important;
    }
    .segment #segment-7{
      padding-left: 132px !important;
      padding-bottom: 60px !important;
    }
  
  
  }

  @media (min-width:992px) and (max-width:1151px){
    #main-circle {
      width:100px !important;
      height:100vh !important;
      display: flex !important;
      justify-content: center !important;
      align-items:center !important;
    }
    .circle-container, .center-circle{
      width:165px !important;
      height: 151px !important;
      font-size: 15px !important;
    }
    .segment{
        width: 391px !important;
        height: 286px !important;
        clip-path: polygon(25% 56%, 105% 0, 122% 112%);
    }
    .segment p {
      font-size:18px !important;
    
    }
    .segment1{
      transform: rotate(0deg) translate(100px)
    }
    .segment2{
      transform: rotate(51.4deg) translate(100px);
    }
    .segment3{
      transform: rotate(102.8deg) translate(100px);
    }
    .segment4{
      transform: rotate(154.2deg) translate(100px);
    }
    .segment5{
      transform: rotate(205.6deg) translate(100px);
    }
    .segment6{
      transform: rotate(257deg) translate(100px);
    }
    .segment7{
      transform: rotate(308.4deg) translate(100px);
      
    }
    .segment #segment-1{
      padding-left: 191px !important;
      padding-top: 39px !important;
    }
    .segment #segment-2{
      padding-left: 36px !important;
      padding-top: 90px !important;
    }
    .segment #segment-3{
      padding-right: 56px !important;
      padding-top: 75px !important;
    }
    .segment #segment-4{
      padding-right: 176px !important;
      font-size: 17px !important;
    }
    .segment #segment-5{
      padding-right: 151px !important;
      padding-bottom: 76px !important;
    }
    .segment #segment-6{
      padding-left: 13px !important;
      padding-bottom: 144px !important;
    }
    .segment #segment-7{
      padding-left: 132px !important;
      padding-bottom: 60px !important;
    }
    .fb-iframe{
      margin-left:250px !important;
    }
  
  
  }