:root {
    --color-brand: #CE171F;
    --color-sec: #1856A6;
    --color-ter: #3c3bc3;
    --color-four: #121178;
    --color-yellow: #FDB913;
    --color-sec2: #1F3869;
    --color-light-red: #F7EFFF;
    --color-light-blue: #FAFAFA;
    --color-light-grey: #E1E1E1;
    --color-green: #28A745;

}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/outfit/Outfit-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

.bibhuti {
    font-family: 'pacifico', cursive;

}

/* @font-face {
    font-family: 'Poppins';
    src: url('assets/fonts/Poppins/Poppins-Regular.ttf') format('ttf'),
         url('assets/fonts/Poppins/Poppins-Regular.ttf') format('wottfff');
    font-weight: normal;
    font-style: normal;
} */

body {
    /* font-family: 'Poppins', sans-serif !important; */
    font-family: 'Outfit', sans-serif;
    /* font-weight: normal; */
}


.text-brand {
    color: var(--color-brand) !important;
}

.text-sec {
    color: var(--color-sec) !important;
}

.text-sec2 {
    color: var(--color-sec2) !important;
}

.text-ter {
    color: var(--color-ter) !important;
}

.text-four {
    color: var(--color-four) !important;
}

.text-grey {
    color: grey !important;
}

.bg-brand {
    background-color: var(--color-brand) !important;
    color: white;
}

.bg-sec {
    background-color: var(--color-sec) !important;
}

.bg-yellow {
    background-color: var(--color-yellow) !important;
}

.bg-ter {
    background-color: var(--color-ter) !important;
}

.bg-light-red {
    background-color: var(--color-light-red) !important;
}

.bg-light-blue {
    background-color: var(--color-light-blue) !important;
}

.bg-green {
    background-color: var(--color-green) !important;
}

.border-light-grey {
    border: 1px solid var(--color-light-grey) !important;
}

.button-hover:hover {

    box-shadow: 0 5px 10px gray;
    transform: translateY(-5px);
    transition: .3s all ease-in-out;
}

.text-hover:hover {

    transform: translateY(-5px);
    transition: .3s all ease-in-out;
}



/* font size  */
.text-10 {
    font-size: 10px;
}

.text-12 {
    font-size: 12px;
}

.text-14 {
    font-size: 14px !important;
}

.text-16 {
    font-size: 16px;
}

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

.text-20 {
    font-size: 20px;
}

.text-24 {
    font-size: 24px;
}

.text-40 {
    font-size: 40px;
}

.section {
    margin-top: 30px;
}

.section-heading {
    font-size: 42px;
    color: var(--color-brand);
    font-weight: 700;
    text-align: center;
}

.section-heading-sec {
    font-size: 32px;
    color: var(--color-sec);
    font-weight: 700;
    text-align: center;
}

@media (min-width:540px) {
    .section-heading-sec {
        font-size: 42px;
    }

}

.hover\:bg-white:hover {
    background-color: white !important;
}

.hover\:text-black:hover {
    color: black !important;
}

.section-break {
    margin: 60px 0;
    position: relative;
    height: 1px;
    background-color: #e0e0e0;
}

.section-break::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 5px;
    background-color: #e74c3c;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

/* Alternative section break - just a line */
.simple-break {
    margin: 40px 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #d0d0d0, transparent);
}

/* Alternative section break - dots */
.dot-break {
    margin: 40px 0;
    text-align: center;
    letter-spacing: 8px;
    color: #d0d0d0;
    font-size: 20px;
}



.border-right-brand {
    border-right: 1px solid var(--color-sec) !important;
}

.horz-line {
    height: 150px;
    width: 1px;
    background-color: black;
    position: relative;
    z-index: -1;

}

/* .horz-line {
    transition: all 1s ease-in-out;
    transform: translateY(-90px);
    opacity: 0;
} */

/* .horz-line.animate {
    transform: translateY(0);
    opacity: 1;
} */
.uni-img {
    transition: all 1s ease-in-out;
    transform: translateY(-90px);
    opacity: 0;
    width: 60%;

}

.uni-img img {
    width: 100%;
    height: 100%;
}

.uni-img.animate {
    transform: translateY(0);
    opacity: 1;
}

.uni-video {
    margin: 30px 0;

    background-color: #FEFDFD;
}

@media (min-width:540px) {
    .uni-video {

        padding: 30px 0;

    }

}

.dotted {
    /* width: 50%; */
    height: 25px;
    /* border: 1px solid black; */
    border-right: 5px dotted var(--color-sec);

}

.dotted-b {
    /* width: 50%; */
    height: 25px;
    /* border: 1px solid black; */
    border-right: 5px dotted black;

}

.curve-1::after {
    content: "";
    position: absolute;
    bottom: 70px;
    /* Adjust as needed */
    left: 9%;
    width: 200px;
    /* Set width */
    height: 50px;
    /* Set height */
    background-image: url('assets/images/demo/start-hub-1/lines.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.iconbox-icon-wrap .bg-change {
    background-color: #f7efff;
    color: #fdb100;

}

/* [data-custom-animations="true"] .animation-element {
  opacity: 0;
  transform: translate(-10px, 10px);
  transition: all 0.8s ease;
} */

/* [data-custom-animations="true"].animate-now .animation-element {
  opacity: 1;
  transform: translate(0, 0);
} */


/* Animated phone icon on top */
.phone-icon-top {
    position: absolute;
    top: -25px;
    left: 20px;
    width: 40px;
    height: 40px;
    background: #ef4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    z-index: 10;
    animation: phoneRing 2s ease-in-out infinite;
}


.cta-wrapper {
    position: relative;
    display: inline-block;

    /* bottom: -55px; */
    left: 50%;
    translate: -50%;
    z-index: 100;
}

.phone-icon-top svg {
    width: 20px;
    height: 20px;
    fill: white;
}

/* Phone ringing animation */
@keyframes phoneRing {

    0%,
    10%,
    20%,
    30%,
    50%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    5%,
    15%,
    25% {
        transform: rotate(-15deg) scale(1.1);
    }

    35% {
        transform: rotate(15deg) scale(1.1);
    }
}

.cta-button-call {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    padding: 12px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    transition: all 0.2s ease;
    animation: jump 1.5s ease-in-out infinite;
    position: relative;
    padding-left: 50px;
    /* Extra space for phone icon */
}

/* Continuous jumping animation */
@keyframes jump {

    0%,
    60%,
    100% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-8px);
    }
}

.cta-button-call:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    animation-play-state: paused;
}

.cta-button-call:hover .phone-icon-top {
    animation-play-state: paused;
    transform: scale(1.2);
}

.cta-button-call:active {
    transform: translateY(0);
}

/* Red accent circle */
.cta-accent {
    width: 20px;
    height: 20px;
    background: #ef4444;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.cta-accent::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Text styling */
.cta-text {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .cta-button {
        padding: 16px 30px;
        padding-left: 45px;
        font-size: 15px;
        gap: 10px;
    }

    .phone-icon-top {
        width: 35px;
        height: 35px;
        top: -22px;
        left: 15px;
    }

    .phone-icon-top svg {
        width: 18px;
        height: 18px;
    }

    .cta-accent {
        width: 18px;
        height: 18px;
    }

    .cta-accent::after {
        width: 5px;
        height: 5px;
    }
}

@media (max-width: 480px) {
    .cta-button {
        padding: 14px 25px;
        padding-left: 40px;
        font-size: 14px;
        gap: 8px;
    }

    .phone-icon-top {
        width: 32px;
        height: 32px;
        top: -20px;
        left: 12px;
    }

    .phone-icon-top svg {
        width: 16px;
        height: 16px;
    }

    .cta-text {
        white-space: normal;
        line-height: 1.3;
    }
}

.call-request {
    position: fixed;
    top: 40%;
    left: 0%;
    width: 120px;
    background-color: var(--color-sec);
    border-radius: 0px 20px 20px 0;
    z-index: 10000;
    padding: 10px;
}

.call-request p {
    font-size: 12px;
    color: white;
    margin: 0;
}

.call-request img {
    position: absolute;
    top: -10px;
    right: 5px;
    width: 70px;
}

.process-icon {
    cursor: pointer;
    transition: transform 0.5s ease-in-out;
}

.process-icon:active {
    animation: flick 0.2s ease-in-out;
}

/* .iconbox-icon-wrap::after{
  content: "";
  background: url("../images/icons/curve.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  right: -40px;
  top: 40px;

  display: block;
  width: 100px;
  height: 100px;


} */
.curve-img,
.curve-img1 {
    display: none;
}

@media (min-width:992px) {

    .curve-img,
    .curve-img1 {
        display: block;
    }

}

.icon1 .curve-img {
    position: absolute;
    left: -103px;
    top: 0px;
    width: 149px;
    height: 154px;
    object-fit: cover;
}

.icon1 .curve-img1 {
    position: absolute;
    right: -103px;
    top: 0px;
    width: 149px;
    height: 154px;
    object-fit: cover;
    transform: scaleX(-1);
}

@keyframes flick {
    0% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.2) rotate(100deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* .main-nav li a:hover{
  color: var(--color-brand) !important;
} */
#plane {
    position: absolute;
    /* 🔥 KEY CHANGE: absolute instead of fixed */
    width: 80px;
    top: 200px;
    left: 100px;
    transition: transform 0.2s ease;
    pointer-events: none;
    z-index: 9999;
    /* transform: rotateX(90deg); */
}

header .main-heading {
    padding-right: 10px;
    padding-left: 10px;
}

@media (min-width:1199px) {
    header .main-heading {
        padding-right: 60px;
        padding-left: 60px;
    }


}

.main-header .btn-solid {
    font-weight: 700;
}

/* why us-uk  */
.bg-dark-before::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.26);
    border-radius: 30px;

}

/* courses  */
.course-section {
    padding-bottom: 30px;
    background-color: #F5F3FE;
}

.course-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    justify-content: center;
    transition: .3s all ease-in-out;
    padding: 40px 20px;
    background-color: #2453da;
}

.course-box:hover {
    background-color: white !important;
    border: .5px solid rgb(173, 171, 171);
    border-radius: 10px;

}

.course-box:hover i,
.course-box:hover p {
    color: var(--color-sec) !important;
}

.course-finder-box:hover {
    box-shadow: 0 5px 15px rgba(128, 128, 128, 0.377);
    transition: .3s all ease-in-out;
}

.how-it-work input,
.how-it-work textarea {
    border: 1px solid #E3E3E3;
    /* color: #FAFAFA; */
}


/* course detail  */

/* Course Header */
.course-header {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.university-info {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.university-logo {
    width: 80px;
    height: 80px;
    background: #2E7D32;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    font-weight: bold;
}

.university-details h1 {
    font-size: 28px;
    color: #2c3e50;
    margin-bottom: 5px;
}

.university-name {
    color: #4472C4;
    font-size: 18px;
    font-weight: 600;
}

.course-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.meta-item {
    text-align: center;
}

.meta-label {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.meta-value {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
}

/* Course Content */
.course-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.content-section {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.section-title {
    font-size: 20px;
    color: #2c3e50;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #4472C4;
}

.requirements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.requirement-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #4472C4;
}

.requirement-title {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
}

.requirement-details {
    color: #666;
    font-size: 14px;
}

.score-badge {
    background: #4472C4;
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    margin: 5px 5px 0 0;
}

.intake-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.intake-badge {
    background: #4472C4;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

/* Sidebar */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-card {
    background: #B8CCE4;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
}

.sidebar-title {
    font-size: 20px;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 600;
}

.form-group {
    margin-bottom: 15px;
    text-align: left;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

.form-group textarea {
    height: 80px;
    resize: vertical;
}

.btn-blue {
    background: #4472C4;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}

.quick-info {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.info-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 600;
    color: #2c3e50;
}

.info-value {
    color: #666;
}

/* Course Modules */
.modules-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.module-item {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid #F4B942;
    width: 100%;
}

.module-name {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

.module-credits {
    color: #666;
    font-size: 14px;
}

/* Career Prospects */
.career-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.career-item {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.career-item:hover {
    border-color: #4472C4;
    transform: translateY(-2px);
}

.career-icon {
    font-size: 24px;
    margin-bottom: 10px;
}

.career-title {
    font-weight: 600;
    color: #2c3e50;
}

/* Fees Breakdown */
.fees-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.fees-table th,
.fees-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.fees-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #2c3e50;
}

.fees-table .total-row {
    background: #4472C4;
    color: white;
    font-weight: 600;
}



/* Responsive */
@media (max-width: 768px) {

    .university-info {
        flex-direction: column;
        text-align: center;
    }

    .course-meta {
        grid-template-columns: 1fr;
    }

    .requirements-grid {
        grid-template-columns: 1fr;
    }

    .modules-grid {
        grid-template-columns: 1fr;
    }

    .career-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {


    .course-header,
    .content-section,
    .sidebar-card,
    .quick-info {
        padding: 20px;
    }

    .career-list {
        grid-template-columns: 1fr;
    }
}





/* .universities-slider{
  background: url(../images/general/uni-banner.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 350px;
  padding-top: 150px;
  margin-bottom: 450px;
  margin-top: -80px;
} */


.universities-slider {
    /* background: url(../images/general/uni-banner.png); */
    /* background: url(../images/general/our-partner-img.png); */
    /* background-repeat: no-repeat;
  background-position: center; */
    /* background-size: cover; */
    /* height: 350px; */
    /* padding-top: 264px;
  margin-bottom: 150px;
  margin-top: -80px; */
}

.universities-slider .partner-bg {
    width: 95%;
    margin: auto;

    height: 250px;
}

@media (min-width:768px) {


    .universities-slider .partner-bg {
        width: 95%;
        margin: auto;

        height: 350px;
    }
}

.universities-slider .partner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.uni-bg-image {
    position: relative;
}

.uni-bg-image video {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    /* transform: translate(-50%, -50%); */
    z-index: -1;
    /* behind the content */
    object-fit: cover;
    opacity: 1;
}

.center-image {
    width: 200px;
    height: 200px;
    background: url('https://via.placeholder.com/200') no-repeat center/cover;
    border-radius: 50%;
    z-index: 2;
}

.line-group {
    display: none;
}

.title-line {
    width: 65PX;
    height: 3px;
    background-color: var(--color-brand);
    margin-bottom: 10px;
}



@media (min-width:768px) {
    .line-group {
        position: absolute;
        top: 40%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 60px;
        z-index: 1;
    }
}

.line {
    width: 0;
    height: 1px;
    background: var(--color-brand);
    opacity: 0;
    transition: width 0.6s ease, opacity 0.6s ease;
}

.line-item {
    display: flex;
    gap: 20px;
    align-items: center;

}

.line-text {
    opacity: 0;
    margin-left: 10px;
    font-size: 16px;
    transition: opacity 0.6s ease;
}

@media (min-width:768px) {
    .left-group {
        left: 0%;
        align-items: flex-end;
    }

    .right-group {
        right: 0%;
        align-items: flex-start;
    }


}

@media (min-width:992px) {
    .left-group {
        left: 00%;
        align-items: flex-end;
    }

    .right-group {
        right: 00%;
        align-items: flex-start;
    }


}

.visible .line {
    width: 100px;
    opacity: 1;
}

.visible .line-text {
    opacity: 1;
}


/* testimonial  */
.testimonial-boxes .box {
    background-color: #0052be;
    border-radius: 30px;
    box-shadow: 0 -1px 10px rgba(124, 123, 123, 0.61);
}

/* .testimonial-boxes{
  animation: fall 2s ease-in-out forwards;
} */
/* @keyframes fall {
  0% { transform: translateY(-100px) rotate(0deg); opacity: 0; }
  100% { transform: translateY(150px) rotate(10deg); opacity: 1; }
} */
.testimonial-slides {
    background-color: #F5F3FE;
}

@media (max-width:768px) {
    .testimonial-boxes .box {
        width: 40%;
    }


}

@media (min-width:768px) {
    .testimonial-boxes .box {
        width: 19%;
    }


}

.ui-selectmenu-button {
    display: none;
}

select {
    display: block !important;
}

.course-finder-top input::placeholder {
    /* color: white; */
    font-size: 14px;

}

.course-finder-top input {
    /* background-color: #1856a641; */
    border: 1px solid rgb(196, 194, 194);
    border-radius: 10px;

}

.course-finder .answer {
    border: 2px solid var(--color-ter);
    border-radius: 30px;
    font-weight: bold;
    padding: 10px;
}

.course-finder-form {
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgb(203, 199, 199);
}

.course-finder-box {
    padding: 10px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid rgb(203, 199, 199);
}

.course-finder .module-title {
    background-color: #1856a638;
}

/* resource */
.free-resources-content {
    padding: 40px 0;

}

.free-resources-content .first-row {
    border: 1px solid #E5E5E5;
    display: flex;
    padding: 0;
    flex-direction: column;
    border-radius: 10px;
    position: sticky;
    top: 100px;
}

ul,
ol {
    list-style: none;
    padding-left: 0;
    /* Optional: Removes left indentation */
}

.free-resources-content .first-row li::marker {
    display: none !important;
}

.free-resources-content .first-row .tab-btn {
    padding: 15px 20px;
}

.free-resources-content .first-row .tab-btn.active {
    background-color: var(--color-brand);
}

.free-resources-content .first-row .tab-btn.active h5 {
    color: white;
}

.free-resources-content .first-row li {
    border-bottom: 1px solid #E5E5E5;

}

.free-resources-content .first-row li:hover {
    background-color: var(--color-brand);
    transition: .3s all ease-in-out;
    color: white;

}

.free-resources-content .first-row li:hover h5 {
    transition: .3s all ease-in-out;
    color: white;

}

.free-resources-content .third-row .divider {
    height: 2px;
    width: 40px;
    background-color: var(--color-brand);
    margin-top: 10px;
}

.free-resources-content input,
.free-resources-content textarea {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #2E02494D;
}

.free-resources-content form input::placeholder,
.free-resources-content form textarea::placeholder {
    color: #2E02494D;
}

.free-resources-content form input:focus,
.free-resources-content form textarea:focus {
    outline: none;
    border-bottom: 1px solid var(--color-brand) !important;
}

.free-resources-content form input:focus::placeholder,
.free-resources-content form textarea:focus::placeholder {
    color: black;
}

.free-resources-content table tr {
    margin: 10px 0;
}

@media (max-width:768px) {
    .monkey-img .fa-arrow-left {
        display: none;

    }

    .monkey-img .fa-arrow-up {
        display: block;

    }

}

@media (min-width:768px) {
    .monkey-img .fa-arrow-left {
        display: block;

    }

    .monkey-img .fa-arrow-up {
        display: none;

    }

}

.second-row {
    position: sticky;
    top: 60px;
}


.tab-content {

    display: none;
}

.tab-content.active {
    display: block;
}

.banner-size {
    width: 100%;
    margin: auto;
}

.banner .animated-text {
    color: #56566e;
}

.banner .module-btn-sm {
    padding: 3px 22px !important;
}

.banner-arrow {
    padding: 2px 2px 1px 2px;
}

@media (min-width: 576px) {
    .banner-sizer {
        max-width: var(--lqd-container-width-xs, 540px);
    }
}

@media (min-width: 768px) {
    .banner-size {
        max-width: var(--lqd-container-width-sm, 720px);
    }
}


@media (min-width:992px) {
    .banner-size {
        width: 1170px;
        margin: auto;
    }


}

.banner-size .module-content .iconbox {
    padding: 5px 0px;


}

.banner-size .module-content .iconbox h3 {
    display: block;
}

.review-button {
    background-color: transparent;
    border: 0;

}

.review-button p {
    background: var(--color-sec);
    color: white;
    border-radius: 30px;
    padding: 0px 20px;
    border: 1px solid var(--color-sec);
    margin: 0;
    font-size: 20px;
    box-shadow: 0 5px 10px gray;
    cursor: pointer;
    animation: bounce 1.5s ease-in-out infinite;
}



/* Continuous jumping animation */
@keyframes bounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-8px);
    }
}

/* banners of pages  */
.about-banner {
    height: 44vh;

    width: 100%;
    background-image: url("../images/about/about-banner.png") !important;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    z-index: 10;
    background-size: cover;

}

.about-page-banner {
    height: auto;

    padding-top: 47px;
    width: 100%;


}

@media (min-width:992px) {
    .about-page-banner {
        /* height: 63vh; */
        padding-top: 0;
    }

}

.study-destinations-banner,
.test-preparations-banner,
.services-banner {
    height: auto;

    padding-top: 85px;
    width: 100%;


}

@media (min-width:992px) {

    .study-destinations-banner,
    .test-preparations-banner {
        /* height: 63vh; */
        padding-top: 0;
    }

    .services-banner {
        height: 40vh;
        padding-top: 0;
    }

}


.study-destinations-banner img,
.test-preparations-banner img,
.about-page-banner img,
.services-banner img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* about page  */

.about-banner::after {
    /* content: ""; */
    width: 100%;
    height: 100%;
    background-color: rgba(126, 123, 123, 0.527);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;


}

.page-banner {
    height: 50vh;
    width: 100%;
    background-image: url("../images/general/about-banner.png") !important;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    z-index: 10;
    background-size: cover;
    /* Ensures it fills the area */
    border-radius: 20px;
    /* background-color: red; */
}

.page-banner::after,
.bg-after::after {
    /* content: ""; */
    width: 100%;
    height: 100%;
    background-color: rgba(126, 123, 123, 0.527);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    border-radius: 20px;


}

.about-page .ceo-container,
#about-page .ceo-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    overflow: hidden;

}

.about-page .design-element {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: linear-gradient(45deg, #6e57e0 0%, #9b6dff 100%);
    top: -100px;
    left: -100px;
    z-index: 1;
}

.about-page .content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    position: relative;
    z-index: 2;
}

.about-page .image-section {
    position: relative;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.about-page .image-frame {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 20px;
    overflow: hidden;
    /* transform: rotate(-5deg); */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    border: 5px solid white;
}

.career .image-frame {
    position: relative;
    width: 300px;
    height: 240px;
    border-radius: 20px;
    overflow: hidden;
    /* transform: rotate(-5deg); */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    border: 5px solid white;
}

.about-page .ceo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-page .name-badge {


    color: black;
    padding: 8px;
    font-size: 26px;
    font-weight: 700;


}

.about-page .message-section {
    padding: 60px 40px;
    position: relative;
}

.about-page .accent-line {
    position: absolute;
    left: 0;
    top: 80px;
    width: 5px;
    height: 100px;
    background: linear-gradient(to bottom, #ff7e5f, #feb47b);
}

.about-page .title {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #6e57e0;
    margin-bottom: 10px;
    font-weight: 500;
}

.about-page .heading {
    font-size: 42px;
    font-weight: 700;
    color: #2d3748;
    margin-top: 0;
    margin-bottom: 30px;
    line-height: 1.2;
}

.about-page .message {
    font-size: 18px;
    line-height: 1.8;
    color: #4a5568;
    position: relative;
    padding-left: 20px;
    margin-top: 30px;
    border-left: 2px dashed #d1d9e6;
}

.about-page .quote-mark {
    position: absolute;
    font-size: 120px;
    color: rgba(110, 87, 224, 0.1);
    top: -40px;
    left: -20px;
    font-family: Georgia, serif;
}

@media (max-width: 768px) {
    .about-page .content-wrapper {
        grid-template-columns: 1fr;
    }

    .about-page .image-section {
        padding-bottom: 0;
    }

    .about-page .message-section {
        padding-top: 20px;
    }
}

.blog {
    position: relative;
}

.blog .blog-line {
    width: 40px;
    height: 2px;
    background-color: var(--color-brand);
}

.blog-filter {
    background-color: #F2F4FF;
    border-radius: 30px;
    padding: 20px;

    margin-top: 20px;

    /* left: 30px; */
}

.blog-post:hover img {
    transform: scale(1.1);
    /* Horizontal flip */
    transition: transform 0.3s ease;
}

.blog .blog-pagination:hover p {
    box-shadow: 0 5px 10px var(--color-sec);
    transform: translate(-5px);
    transition: .4s all ease-in-out;

}

.blog .blog-post:hover {
    /* box-shadow: 0 5px 10px grey; */
    /* padding: 20px; */
}

.reading-time {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: white;
    color: var(--color-sec);
}

/* blog detail  */
.blog-detail-box {
    padding: 30px 40px;
    margin-bottom: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(128, 128, 128, 0.479);
}

.blog-detail-box .accent-line {
    position: absolute;
    left: 0;
    top: 0px;
    width: 5px;
    height: 100%;
    background: #F59E0B;
}

.blog-quote {
    position: relative;
    padding: 20px;
    background-color: #FFF9EB;
}

.cta-widget {
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
    color: #fff;
    text-align: center;
    padding: 30px;
}

.cta-title {
    font-size: 22px;
    margin-bottom: 15px;
    color: #fff;
}

.cta-text {

    font-size: 15px;
}

.cta-button {
    display: inline-block;
    background-color: #f59e0b;
    color: #fff;
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 14px;
}

.cta-button:hover {
    background-color: #fff;
    color: #1e3a8a;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.sidebar-widget {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    padding: 25px;
    margin-bottom: 30px;
}

.widget-title {
    font-size: 20px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
    color: #1e3a8a;
    font-weight: 600;
}

.popular-posts-list {
    list-style: none;
}

.popular-post-item {
    display: flex;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.popular-post-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.popular-post-image {
    width: 70px;
    height: 70px;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 15px;
}

.popular-post-title {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 5px;
}

.popular-post-date {
    font-size: 12px;
    color: #888;
}




/* Hero Section */
.blog-hero {
    position: relative;
    height: 400px;
    overflow: hidden;
    margin-bottom: 40px;
    border-radius: 10px;
    margin-top: 30px;
}

.blog-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-hero:hover img {
    transform: scale(1.03);
}

.blog-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 30px;
    color: #fff;
}

.blog-category {
    background-color: #f59e0b;
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 15px;
    font-weight: 500;
}

.blog-title {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    margin-bottom: 15px;
    line-height: 1.2;
}

.blog-meta {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.blog-meta-divider {
    margin: 0 10px;
}



/* select 2  */
.select2-container {
    width: 200px !important;
}

.select2-container--default .select2-selection--single {
    height: 35px !important;
    background-color: #F2F4FF !important;
    border-radius: 30px !important;
    border: 1px solid #F2F4FF !important;
    padding-left: 10px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 14px !important;

}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-left: -10px !important;
    margin-top: 0px !important;
}

/* events  */
@media (min-width:768px) {
    .events {
        width: 95%;
        margin: auto;

    }

}

@media (min-width:992px) {
    .events {
        width: 85%;
        margin: auto;

    }

}

@media (min-width:1200px) {
    .events {
        width: 75%;
        margin: auto;

    }

}

.events .carousel-item-content {
    box-shadow: 0 4px 10px rgb(206, 206, 206);
    border-radius: 30px;
}

.events .carousel-item-content img {

    border-radius: 30px 30px 0 0;
}

.events .event-block {
    box-shadow: 0 4px 10px rgb(206, 206, 206);
    border-radius: 30px;
}

.events .event-block img {

    border-radius: 30px 30px 0 0;
}

.events .flickity-viewport {
    height: 450px !important;

}

.events button {
    border: 1px solid var(--color-ter);
    padding: 10px 30px;
    font-weight: bold;

}

.events button:hover {
    border: 1px solid var(--color-ter);
    background-color: var(--color-ter);
    color: white !important;
    box-shadow: 0 5px 10px var(--color-ter);
    transform: translateY(-5px);
    transition: .3s all ease-in-out;
}

/* why choose us  */
.why-us {
    border-bottom: 2px dotted black;
}

.why-us .become-member {

    background-color: #1856A6D4;

}

.choose.active {
    padding: 10px 20px;
    background-color: var(--color-brand);
    color: white;
    font-size: 20px;
    border-radius: 10px;
    border: 1px solid var(--color-brand);
}

.choose {
    padding: 10px 20px;
    background-color: white;
    color: #2E02494D;
    font-size: 20px;
    border-radius: 10px;
    border: 1px solid #2E02494D;
}

.why-us form input,
.why-us form textarea {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #2E02494D;
}

.why-us form input::placeholder,
.why-us form textarea::placeholder {
    color: #2E02494D;
}

.why-us form input:focus,
.why-us form textarea:focus {
    outline: none;
    border-bottom: 1px solid var(--color-brand) !important;
}

.why-us form input:focus::placeholder,
.why-us form textarea:focus::placeholder {
    color: black;
}

.why-us .first-row .img1 {
    height: 220px;
    width: 220px;
    border-radius: 100px 0 0 0;
    object-fit: cover;


}

.why-us .first-row .img2 {
    height: 76px;
    width: 76px;
    border-radius: 24px;
    object-fit: cover;


}

.why-us .first-row .img3 {
    height: 106px;
    width: 106px;
    border-radius: 0 50px 0 0;
    object-fit: cover;


}

.why-us .first-row .img4 {
    height: 114px;
    width: 114px;
    border-radius: 0 0 0 50px;
    object-fit: cover;


}

.why-us .first-row .img5 {
    height: 182px;
    width: 182px;
    border-radius: 0 100px 0 0;
    object-fit: cover;


}

.why-us .first-row .img6 {
    height: 142px;
    width: 142px;
    border-radius: 0 0 0 90px;
    object-fit: cover;


}

.why-us .first-row .img7 {
    height: 130px;
    width: 130px;
    border-radius: 0 0 60px 0;
    object-fit: cover;


}

.why-us .first-row .img8 {
    height: 166px;
    width: 166px;
    border-radius: 0 0 90px 0;
    object-fit: cover;


}

@media (max-width:1400px) {
    .why-us .first-row .mobile-view {
        display: block;
        width: 100%;
        height: 100%;
    }

    .why-us .first-row .image-part {
        display: none;

    }
}

@media (min-width:1400px) {
    .why-us .first-row .mobile-view {
        display: none;
    }

    .why-us .first-row .image-part {
        display: block;

    }

    .why-us .first-row .img1 {
        height: 167px;
        width: 158px;
        border-radius: 100px 0 0 0;
        object-fit: cover;
        position: absolute;
        top: 5px;
        left: 0px;

    }

    .why-us .first-row .img2 {
        height: 76px;
        width: 76px;
        border-radius: 24px;
        object-fit: cover;
        position: absolute;
        top: 55px;
        left: 220px;

    }

    .why-us .first-row .img3 {
        height: 106px;
        width: 106px;
        border-radius: 0 50px 0 0;
        object-fit: cover;
        position: absolute;
        top: 5px;
        left: 390px;

    }

    .why-us .first-row .img4 {
        height: 114px;
        width: 114px;
        border-radius: 0 0 0 50px;
        object-fit: cover;
        position: absolute;
        top: 270px;
        left: 68px;

    }

    .why-us .first-row .img5 {
        height: 150px;
        width: 130px;
        border-radius: 0 100px 0 0;
        object-fit: cover;
        position: absolute;
        top: 156px;
        left: 220px;

    }

    .why-us .first-row .img6 {
        height: 142px;
        width: 142px;
        border-radius: 0 0 0 90px;
        object-fit: cover;
        position: absolute;
        top: 415px;
        left: 0px;

    }

    .why-us .first-row .img7 {
        height: 102px;
        width: 104px;
        border-radius: 0 0 60px 0;
        object-fit: cover;
        position: absolute;
        top: 365px;
        left: 220px;

    }

    .why-us .first-row .img8 {
        height: 127px;
        width: 116px;
        border-radius: 0 0 90px 0;
        object-fit: cover;
        position: absolute;
        top: 300px;
        left: 380px;

    }



}

.why-us .icons:hover {
    background-color: var(--color-brand);
    color: white;

}


.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #7777775d;
    backdrop-filter: blur(10px);
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease-in-out;
    z-index: 100;
}

.popup-container.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;

}

/* get in touch  */
.popup-container-inside {
    width: 90%;
    /* height: 90vh; */
    margin: auto;
    margin-top: 10px;

    position: relative;

}

.popup-container-inside .inside1 {
    background-color: white;
    height: 100vh;
    width: 100%;
    border-radius: 30px 0 0 30px;

}

.popup-container-inside .inside2 {
    background: linear-gradient(to bottom, #1856A6, #CE171F);
    height: 100%;
    width: 100%;
    border-radius: 0 30px 30px 0;
}

.popup-container-inside .inside-content {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 90%;
    height: 100%;
}

.popup-container-inside .inside-content .map {
    height: 90vh;
}

.inside-content form input,
.inside-content form textarea {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #2E02494D;
}

.inside-content form input::placeholder,
.inside-content form textarea::placeholder {
    color: #2E02494D;
}

.inside-content form input:focus,
.inside-content form textarea:focus {
    outline: none;
    border-bottom: 1px solid var(--color-brand) !important;
}

.inside-content form input:focus::placeholder,
.inside-content form textarea:focus::placeholder {
    color: black;
}

.popup-container-inside input[type=number]::-webkit-outer-spin-button,
.popup-container-inside input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.popup-container-inside input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */
}

/* for mobile view  */
.mobile-navbar-collapse .menu-dropdown {
    background-color: #8fb6f41e;
}

.menu-dropdown ul {
    padding: 0 25px 0;
}

.menu-dropdown ul li {
    padding: 20px 0;



}

.menu-dropdown ul li a {

    color: black;


}

.popup-container-inside-mobile {
    width: 100%;
    margin-top: 30px;
    padding: 60px 0;




}

.popup-container-inside-mobile .inside-content .inside1 {
    background-color: #9cbbe446;

    width: 100%;
    /* border-radius: 30px 0 0 30px; */

}

.popup-container-inside-mobile .inside-content {


    width: 100%;


}

.popup-container-inside-mobile .inside-content .map {
    height: 400px;
    width: 100%;
}

/* career  */
.career .career-box {
    border: 1px solid rgb(233, 230, 230);
    border-radius: 30px;
    padding: 30px 20px;
}

.career .career-box:hover {
    box-shadow: 0 5px 10px gray;
}

.career .career-box i {
    color: #FFA033;
}

.career .career-box button {
    display: inline-block !important;
    padding: 10px;
    border: 2px solid #FFA033;
    border-radius: 30px;
    background-color: white;
    color: #FFA033;
    width: 40%;
    font-size: 14px;

}

.career .career-box button:hover {

    border: 2px solid #FFA033;

    background-color: #FFA033;
    color: white;
    transition: .3s all ease-in-out;
}

/* contact us  */
.contact-box {
    /* border: 1px solid rgb(206, 201, 201); */
    box-shadow: 0 5px 10px gray;
    padding: 60px 0;

}

.contact-form {

    padding: 50px 40px;
    box-shadow: 0 5px 10px gray;
}

@media (min-width:768px) {
    .contact-form {
        width: 70%;
        margin: auto;
    }

}

.contact-form input,
.contact-form textarea {
    border: 1px solid rgb(184, 180, 180);
    border-radius: 0;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border: 1px solid var(--color-brand);

}

.accordion-heading:hover .accordion-title-txt {
    padding-left: 10px;
    transition: 0.4s all ease-in-out;
}

/* franchise  */
.franchise-form {
    width: 90%;
    margin: 30px auto 0 auto;
    padding: 50px;
    border-radius: 30px;
}

.franchise-form select {
    border: 2px solid var(--color-brand);
    /* custom border color */
    font-size: 16px;
    /* text size for selected item */
    padding: 8px;
    border-radius: 5px;
    background-color: white;
    color: #333;
    outline: none;
}

/* Change arrow icon (optional) */
.franchise-form select::-ms-expand {
    display: none;
    /* remove default arrow in IE */
}

/* Style options (limited support) */
.franchise-form select option {
    font-size: 14px;
    /* text size inside dropdown */
    color: #333;
    background: white;
}

/* Hover effect on options (ONLY works in Firefox) */
.franchise-form select option:hover {
    background: var(--color-brand) !important;
    color: white;
}

.franchise-form input,
.franchise-form textarea,
.franchise-form select option {
    border: 1px solid rgb(226, 224, 224);
    border-radius: 0;
}

.franchise-form .ui-selectmenu-text {
    color: white;
}

.franchise-form input:focus,
.franchise-form textarea:focus,
.franchise-form select option:focus {
    outline: none;
    border: 1px solid var(--color-brand);

}

.franchise-form .select2-container {
    width: 100% !important;
}

.franchise-form .select2-container--default .select2-selection--single {
    height: 46px !important;
    background-color: #fff !important;
    border-radius: 0 !important;
    border: 1px solid rgb(226, 224, 224) !important;
    padding-left: 10px !important;
    padding-top: 10px;
}

.franchise-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 16px !important;

}

.franchise-form .select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-left: -10px !important;
    margin-top: 0px !important;
}

.franchise-model {
    width: 80%;
    margin-left: auto;
}


#franchise-invest-button {
    display: none !important;
}

#franchise-timeframe-button {
    display: none !important;
}


/* social-platform */
.social-platform .iconbox:hover i {
    color: white !important;
}


@media (min-width:768px) {

    .social-platform .social-linkedin,
    .social-platform .social-pinterest,
    .social-platform .social-youtube {
        width: 25%;
    }



}

/* cost calculator */
.total-cost {
    padding: 20px 40px;
    /* background: url("../images/general/cost-bg.png"); */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #F9F5F2;
    border-radius: 30px;
    /* z-index: 2; */
}

@media (min-width:992px) and (max-width:1200px) {
    .total-cost {
        padding: 20px 2px;
    }

}

.total-cost table {
    /* border: 2px solid white; */
    border-collapse: separate;
}

.total-cost h4 {
    color: #A8664E;
    font-weight: bold;
    font-size: 22px;
    text-align: center;
    padding-bottom: 10px;
}

.total-cost thead tr th {
    background-color: #D7E1D5;
    font-size: 16px;
    /* padding-left: 0.8em; */
    text-align: center;
}

.total-cost tbody tr td {
    font-size: 16px;
    text-align: center;
    /* background-color: #D2EBE2; */

}

.total-cost tbody tr:nth-child(1) {
    background-color: #D2EBE2;

}

.total-cost tbody tr:nth-child(2) {
    background-color: #D3E8EB;

}

.total-cost tbody tr:nth-child(3) {
    background-color: #DEDDE6;

}

.total-cost tbody tr:nth-child(4) {
    background-color: #D9CEDB;

}

.total-cost tbody tr:nth-child(5) {
    background-color: #F6D0C9;

}

.cost-choosing {
    padding: 30px;
    border-radius: 30px;
    background-color: #F7F0FF;
}

.cost-choosing .circle1 {
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background-color: #23B334;
}

.cost-choosing .circle2 {
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background-color: #9A249E;
}

.cost-choosing .tabs:hover {
    box-shadow: 0 5px 10px gray;
    transform: translateY(-10px);
    transition: .3s all ease-in-out;
    cursor: pointer;
}

.cost-choosing .next-btn button {
    background-color: #0000002a;

}

.cost-choosing .next-btn button:hover i {
    margin-left: 10px;
    transition: .3s all ease-in;
}

.cost-choosing .next-btn i {
    color: var(--color-ter);
    padding: 5px 8px;
    background-color: #FFEFE0;
    border-radius: 100%;
    /* margin-left: 10px; */
    font-size: 12px;

}

.cost-choosing,
.total-cost {
    position: relative;
    z-index: 2;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
}

.section-fall {
    /* height: 500px; */
    width: 100vw;
    position: relative;
    /* display: flex; */
    justify-content: center;
    align-items: center;
}

.progress-line {
    position: relative;
    height: 80px;
    margin-top: 20px;
}

.progress-track {
    position: absolute;
    top: 50%;
    left: 30px;
    right: 30px;
    height: 5px;
    background: #ccc;
    transform: translateY(-50%);
}

.progress-track span {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
}

.banana img {
    width: 24px;
}

.banana {
    top: 50%;
}

#b1 {
    left: 0%;
}

#b2 {
    left: 25%;
}

#b3 {
    left: 50%;
}

#b4 {
    left: 75%;
}

#b5 {
    left: 100%;
}

.monkey {
    position: absolute;
    bottom: 22px;
    transition: 0.5s all ease;

}

.monkey img {
    width: 60px;
    max-width: 80px;
}

@media (min-width:992px) {
    .monkey img {
        width: 80px;
        max-width: 80px;
    }

}

#b5 img {
    width: 30px;
    max-width: 30px;
}

#b5 {
    display: block;
}

#b5.active {
    display: none;
}


/* .monkey {
  position: absolute;
  top: -40px;
  font-size: 24px;
  transition: left 0.4s ease;
} */
.cost-choosing .step-content {
    display: none;
}

.cost-choosing .step-content.active {
    display: block;
}

/* career details  */
.career-img {
    width: 50px;
    height: 50px;
    border: 1px solid var(--color-brand);
    border-radius: 100%;


}

.career-img img {
    width: 100%;
    height: 100%;

    padding: 5px;


}

.career.details .career-box {

    box-shadow: 0 5px 10px var(--color-sec);
}

.career-details h3 {
    font-size: 20px;
    margin-bottom: 0;
}

.career-details p {
    font-size: 14px;
}

.career-details h4 {
    font-size: 15px;
    font-weight: normal;

}

.career-details .content h6,
.career .content li {
    font-size: 12px;
}

.career-details ul {
    padding-left: 0 !important;
}

.career-details ul li {
    list-style: none;
    font-size: 14px;
}

.career-details .form {
    background-color: white;
    box-shadow: 0 5px 10px gray;
    padding: 40px;
}

.career-details form input,
.career-details form textarea {
    border: 1px solid rgb(206, 202, 202);
}

.career-details form input:focus,
.career-details form textarea:focus {
    outline: 0;
    border: 1px solid var(--color-brand);
}

.line-through {
    width: 100%;
    border-bottom: 1px solid var(--color-sec);
}

.career-details .position {
    padding: 5px;
    background-color: white;
    position: absolute;
    top: -15px;
    left: 100px;
    font-size: 14px !important;

}

.career-details .position h4 {

    font-size: 16px !important;

}

@media (min-width:778px) {
    .career-details .position {
        padding: 5px;
        background-color: white;
        position: absolute;
        top: -20px;
        left: 400px;

    }

    .career-details .position h4 {
        font-size: 22px !important;


    }

}

/* gallery */

.gallery {
    column-count: 4;
    column-gap: 0px;
    height: 100%;
    /* padding: 8px; */
}

.gallery img {
    width: 100%;
    margin-bottom: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gallery img:hover {
    transform: scale(1.03);
}

/* Lightbox */
.lightbox {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    visibility: visible;
    opacity: 1;
}

.lightbox img {
    width: 50%;
    height: 60%;
    max-width: 90%;
    max-height: 85%;
    border-radius: 8px;
    object-fit: cover;
}

.navbar-menu li {
    position: relative;
}

/* .dropdown:hover .dropdown-menu{
  display: flex;
  gap: 10px;
justify-content: space-between;

    border-top: 3px solid var(--color-brand);
    border-bottom: 3px solid var(--color-brand);
  width: 50%;
  transition: .5s all ease-in-out;
}
 .dropdown-menu ul{
  display: flex;
  gap: 10px;

  flex-direction: column;

}


.dropdown-menu {
  position: absolute;

  top: 100%;
  left: 0;
  background: #fff;
  display: none;
  min-width: 400px;
  width: 100%;
  z-index: 100;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);


}
.dropdown-menu {

  padding: 20px 0;
}
.dropdown-menu li {
  list-style: none;

}

.dropdown-menu a {
  font-size: 14px;
  padding: 0 15px;
} */

/* Dropdown Styles */
.dropdown {
    position: relative;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 400;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
}

.dropdown-trigger:hover {
    color: #1e293b;
}

.dropdown-icon {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.dropdown:hover .dropdown-icon {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-1rem);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-content {
    background: white;
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
    padding: 2rem;
    width: 800px;
    position: relative;
    overflow: hidden;
}

/* Background Decorations */
.bg-decoration {
    position: absolute;
    border-radius: 50%;
    opacity: 0.5;
    pointer-events: none;
}

.bg-decoration-1 {
    top: -8rem;
    right: -8rem;
    width: 16rem;
    height: 16rem;
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
}

.bg-decoration-2 {
    bottom: -6rem;
    left: -6rem;
    width: 12rem;
    height: 12rem;
    background: linear-gradient(45deg, #dcfce7 0%, #dbeafe 100%);
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 10;
}

.service-category {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.category-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

.service-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.service-item {
    cursor: pointer;
    border-radius: 0.75rem;
    padding: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.service-item:hover {
    background: #f8fafc;
    transform: translateY(-0.25rem) scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.service-icon {
    padding: 0.2rem;
    border-radius: 0.5rem;
    color: white;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-item:hover .service-icon {
    transform: scale(1.1) rotate(6deg);
}

.service-icon img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    box-shadow: 0 5px 10px gray;
    border-radius: 100%;
}

.service-content {
    flex: 1;
    min-width: 0;
}

.service-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    margin-bottom: 0.25rem;
    transition: color 0.3s ease;
}

.service-item:hover .service-name {
    color: #0f172a;
}

.service-description {
    font-size: 0.75rem;
    color: #64748b;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.4;
}

.service-item:hover .service-description {
    opacity: 1;
    max-height: 5rem;
    margin-top: 0.25rem;
}

.service-border {
    position: absolute;
    bottom: 0;
    left: 0.75rem;
    right: 0.75rem;
    height: 2px;
    width: 0;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 1px;
}

.service-item:hover .service-border {
    width: calc(100% - 1.5rem);

}

/* Color Classes */
.blue-bg {
    background: #3b82f6;
}

.red-bg {
    background: #ef4444;
}

.green-bg {
    background: #10b981;
}

.purple-bg {
    background: #8b5cf6;
}

.orange-bg {
    background: #f97316;
}

.indigo-bg {
    background: #6366f1;
}

.pink-bg {
    background: #ec4899;
}

.emerald-bg {
    background: #059669;
}

.cyan-bg {
    background: #06b6d4;
}

.amber-bg {
    background: #f59e0b;
}

.rose-bg {
    background: #f43f5e;
}

.teal-bg {
    background: #14b8a6;
}

.blue-gradient {
    background: linear-gradient(90deg, #3b82f6, transparent);
}

.red-gradient {
    background: linear-gradient(90deg, #ef4444, transparent);
}

.green-gradient {
    background: linear-gradient(90deg, #10b981, transparent);
}

.purple-gradient {
    background: linear-gradient(90deg, #8b5cf6, transparent);
}

.orange-gradient {
    background: linear-gradient(90deg, #f97316, transparent);
}

.indigo-gradient {
    background: linear-gradient(90deg, #6366f1, transparent);
}

.pink-gradient {
    background: linear-gradient(90deg, #ec4899, transparent);
}

.emerald-gradient {
    background: linear-gradient(90deg, #059669, transparent);
}

.cyan-gradient {
    background: linear-gradient(90deg, #06b6d4, transparent);
}

.amber-gradient {
    background: linear-gradient(90deg, #f59e0b, transparent);
}

.rose-gradient {
    background: linear-gradient(90deg, #f43f5e, transparent);
}

.teal-gradient {
    background: linear-gradient(90deg, #14b8a6, transparent);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .dropdown-content {
        width: 700px;
    }
}

@media (max-width: 768px) {


    .dropdown-content {
        width: 90vw;
        padding: 1.5rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }



    .cta-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

@media (max-width: 480px) {


    .dropdown-content {
        width: 95vw;
        padding: 1rem;
    }

    .services-grid {
        gap: 1rem;
    }


}

/* Enhanced Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown:hover .dropdown-content {
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Focus States for Accessibility */
.dropdown-trigger:focus,
.nav-link:focus,
.cta-button:focus,
.book-call-btn:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.service-item:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 0.75rem;
}

/* Show on toggle */
.dropdown.open .dropdown-menu {
    display: block;
}

.nav-button {
    position: absolute;
    top: 50%;
    font-size: 1.5em;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    padding: 5px 20px;
    cursor: pointer;
    user-select: none;
    transform: translateY(-50%);
    border-radius: 50%;
}

.nav-button:hover {
    background: rgba(255, 255, 255, 0.4);
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 0.8em;
    color: #fff;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 50%;
    z-index: 100;
    transition: background 0.3s ease;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.4);
}

@media (max-width: 1024px) {
    .gallery {
        column-count: 3;
    }
}

@media (max-width: 768px) {
    .gallery {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .gallery {
        column-count: 1;
    }
}

/* sitemap  */
.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.sitemap-category {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.sitemap-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #dc2626 0%, #1e40af 100%);
}

.sitemap-category:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.sitemap-category h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.category-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    flex-shrink: 0;
    padding: 8px;
}

.core-pages .category-icon {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.study-abroad .category-icon {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
}

.student-support .category-icon {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.more-info .category-icon {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

.careers .category-icon {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
}

.sitemap-category ul {
    list-style: none;
    padding: 0;
}

.sitemap-category li {
    margin-bottom: 12px;
}

.sitemap-category li a {
    text-decoration: none;
    color: #475569;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 8px;
    display: block;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.sitemap-category li a:hover {
    background: #f1f5f9;
    color: #dc2626;
    border-left-color: #dc2626;
    transform: translateX(5px);
}



.stats-section {
    background: white;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.stat-item {
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    background: #f8fafc;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 5px;
}

.stat-label {
    color: #64748b;
    font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 768px) {




    .sitemap-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .sitemap-category {
        padding: 20px;
    }

    .sitemap-category h2 {
        font-size: 1.3rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {

    .sitemap-category {
        padding: 15px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* service */

.service-points {
    border: .5px solid #1856a61e;


}

.service-points:hover {
    border: 1px solid #1856A6;
    background-color: #1856A6;
    transition: 0.3s all ease-in-out;
    box-shadow: 0 5px 14px #1856A6;


}

.lqd-tabs-style-9 .lqd-tabs-nav li.active {
    border: 1px solid #1856A6;


}

@media (max-width:479px) {
    .lqd-tabs-style-9 .lqd-tabs-nav {
        flex-direction: row;
    }

    .lqd-tabs-style-9 .lqd-tabs-nav li {
        width: 50%;
    }

}




/* footer  */
/* footer background image can be useed for other site as well  */
.footer-graphics {
    background: url("../images/general/footer-graphics.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 35px;
    margin-bottom: -10px;

}

.footer-content {

    background-color: var(--color-yellow);

}

.highlight-tab {
    background-color: #e0f2fe;
    /* light blue */
    font-weight: bold;
    color: #0c4a6e;
    /* dark brand color */
}

.footer-content .footer-inside {

    padding-top: 30px;
}

@media (min-width:768px) {
    .footer-graphics {
        padding: 47px;

    }

}

@media (min-width:1200px) {
    .footer-graphics {
        padding: 67px;

    }


}




footer input::placeholder {
    color: white;
    /* Change placeholder text color */
    opacity: 1;
    /* Ensures full visibility */
    font-size: 12px;
}

footer input,
footer button {
    border-bottom: 1px solid white;
}

.lqd-fancy-menu input::placeholder {
    color: gray;
}

.lqd-fancy-menu input:focus {
    outline: 0;
    border: 1px solid var(--color-brand);

}

footer form {

    border-radius: 4px;
    /* border: 0.1px solid white; */
    margin-bottom: 10px;
}

footer form input {
    background-color: #fff;
    margin: 2px 0;


}

footer form button {
    background-color: #675113;
    margin: 2px 0;


}

footer form input::placeholder {
    color: rgb(37, 36, 36) !important;


}

.footer-logos {
    width: 100%;

    /* padding: 10px 0; */

}

.footer-logos .row {
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 15px;
    gap: 7px;

}

.footer-logos img {
    padding: 5px;

    margin: 5px 0;


}

/* .footer-logos img:hover{
transition: .3s all ease-in-out;
box-shadow: 0 5px 10px rgb(180, 179, 179);


} */
.footer-bottom {
    /* background-color: #731c1c; */
    background-color: var(--color-brand);
    padding: 20px 0;
}

.social-icons-footer i {
    color: #3c2c07;
    font-size: 30px;
}